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 CategoryName

1，“财务”

2，“通信”

书籍

id catId bookName

1，1，'财务101'

2、1，“基本经济”

3、2，“关键对话”

4、2，“影响力”

Answer 1

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

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

角度-按类别显示项目

1 个答案: