如何将rxjs角中的每个项目的加载设置为false或true？

如何解决如何将rxjs角中的每个项目的加载设置为false或true？

这是在我选择商品的组件中

this.test = this.string$.pip(
switchMap(() => {
  return this.list.checkBox(data)
})

this.test.subscribe((res) => {

},(err) => {
  item.status = false
}

this.string.next(date);

我想为每个项目添加加载，例如，当我们具有仅针对该项目的发布请求集加载时，我有想要的数据列表，我可以通过写入switchmap对其进行测试，但为所有项目设置了加载，或者在switchmap之后和之前的水龙头中，如下所示，但不起作用

this.test = this.string$.pip(
tap(() => this.loading =true),switchMap(() => {
  return this.list.checkBox(data)
}),tap(() => this.loading = false
)
 

解决方法

最好在stackblitz上创建一个样本。这样，将更容易发现问题并提供解决方案。更重要的是，帖子中还有很多不清楚的地方。

1. 您是否要异步加载每个单独的数据？
2. 正在哪里展示装载机？是在列表的数据项中还是通用的加载程序？
3. 您是要在渲染时显示加载程序还是从服务器加载数据时显示加载程序。

另一个点switchMap运算符可能在这里不起作用，因为它旨在取消先前的订阅并从最新的订阅中发出数据。我希望这有助于更好地表达和提出问题。

,

我建议创建一个项目组件，您可以在其中保留每个项目的状态。

示例：

// Parent html
<app-item *ngFor="let item of ['A','B','C']" [item]="item"></app-item>

// child component
export class ItemComponent {

  @Input()
  item: string;

  pending$ = new BehaviorSubject(false);

  constructor(private myAsyncService: MyAsyncService) {}

  onClick() {
    this.pending$.next(true);

    this.myAsyncService.getData().pipe(
      take(1),).subscribe(
      () => this.pending$.next(false),);
  }
}

// child html
<button (click)="onClick()" [ngClass]="{ pending: pending$ | async }">{{ item }}</button>

// child css
.pending {
  background-color: red
}

// the service
getData(): Observable<number> {
    return timer(2000);
  }

在此示例中，每个按钮分别变为红色2秒钟。

请参阅Stackblitz https://stackblitz.com/edit/angular-14xsoe?file=src/app/my-async.service.ts