javascript - Angular - 按类别显示可观察列表

Question

我有类别表和按类别列出的项目列表。我想在其类别下显示列表。目前正在尝试使用 *ngIf="cat.id === mylist.catid" 来实现这一点，但无法正常工作。有什么建议吗？

 categories: Observable<any[]>;
 myList: Observable<any[]>;


this.db.GetDatabaseState().subscribe(rdy => {
  if (rdy) {
    this.categories = this.db.getCategories();
    this.myList = this.db.getList();
}




    <div *ngFor="let cat of categories | async">
          <ion-label>
            {{ cat.CategoryName }}
          </ion-label>

    <ion-row>
    <ion-col *ngFor="let mylist of myList | async">
      <ion-item *ngIf="cat.id === mylist.catid">
          <ion-label>{{mylist.Name}}</ion-label>
      </ion-item>
    </ion-col>
   </ion-row>

   </div>

这是 Categories 和 MyList 的样子

类别

1、“水果”

2、“书籍”

我的列表

1, 1, '香蕉'

2, 1, '橙色'

3, 2, '关键对话'

4, 2, '影响'

标签： javascriptangularionic-frameworkobservable

Answer 1

最好使用SwitchMap而不是使用订阅里面subscribe。

 categories$: Observable<any[]>;
 myList$: Observable<any[]>;

this.db.GetDatabaseState().subscribe(rdy => {
 if (rdy) {
     this.categories$ = this.db.getCategories();
     this.myList = this.db.getList();
 }
}

safe operator在 html 中使用。

{{ cat?.CategoryName }}