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、《金融》

2、“通訊”

圖書

id catId bookName

1, 1, '財經101'

2, 1, '基礎經濟'

3, 2, '關鍵對話'

4, 2, '影響'

Answer 1

您的代碼中發生了很多異步操作。 使其順序。 不使用字符串插值，而是在 .ts 文件中進行更改

在 getCategory 的 subscribe 中調用 getbookbycat，這樣它會更加同步並創建一個 map 以在 HTML 上呈現。 這將打印每個類別及其書籍的鍵值對。