Angular

Question

我想在其类别下显示书籍，但由于为每个类别 ID 调用了 LoadBooksByCat(catId)，它会将所有以前显示的书籍更新到新列表

categories: Observable<any[]>;
 myBooks: Observable<any[]>;
 
 this.db.GetDatabaseState().subscribe(rdy => {
  if (rdy) {
    this.categories = this.db.getCategories();
    }
}

LoadMyBooksByCat(catId){
    this.myBooks = this.db.LoadBooksByCat(catId);
  }



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

        <ion-row>
        <ion-col *ngFor="let books of myBooks | async">
          <ion-item>
              <ion-label>{{books.bookName}}</ion-label>
          </ion-item>
        </ion-col>
       </ion-row>

</div>

这是我从服务调用的 getCategories 和 LoadBooksByCat 方法

getCategories(): Observable<Category[]> {
  return this.categories.asObservable();
}

LoadBooksByCat(catId:number){
  let mybooks: mybooks[] = [];
   this.database.executeSql('SELECT mybooks.bookName, mybooks.id, mybooks.catId, Category.CategoryName AS mybooks FROM Books JOIN Category ON Category.id = mybooks.catId WHERE mybooks.catId=' + catId, []).then(data => {
    
    if (data.rows.length > 0) {
      for (var i = 0; i < data.rows.length; i++) {   
        mybooks.push({ 
          id: data.rows.item(i).id,
          catId: data.rows.item(i).catId,
          bookName: data.rows.item(i).bookName
         });
      }
    }
    this.mybooks.next(mybooks);
  });
  return this.mybooks.asObservable();
}

这是类别和图书数据库的样子

类别

id 类别名称

1，'Finance'

2，'Communication'

书籍

id catId bookName

1, 1, 'Finance 101'

2、1、'Basic Economy'

3、2、'Crucial Conversation'

4、2、'Influence'

Answer 1

您的代码中发生了很多异步操作。使其顺序。不使用字符串插值，而是在 .ts 文件中进行更改

在 getCategory 的订阅中调用 getbookbycat，这样它会更加同步并创建一个地图以在 HTML 上呈现。这将打印每个类别及其书籍的键值对。

Angular - 按类别显示项目

Angular - Display Item by Category

javascript

rxjs

ionic-framework

ionic4