Javascript 角度-按类别显示项目

我想显示其类别下的书籍，但由于为每个类别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>
  

类别：可观察；
myBooks：可观察的；
this.db.GetDatabaseState（）.subscribe（rdy=>{
如果（rdy）{
this.categories=this.db.getCategories（）；
}
}
通过CAT加载MyBooks（catId）{
this.myBooks=this.db.LoadBooksByCat（catId）；
}
{{cat.CategoryName}
{{LoadMyBooksByCat（cat.id）}
{{books.bookName}

这是我从服务中调用的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();
}

getCategories（）：可观察{
返回此.categories.asObservable（）；
}
LoadBooksByCat（catId:编号）{
让我的书：我的书[]=[]；
this.database.executeSql（'SELECT mybooks.Books.name、mybooks.id、mybooks.catId、Category.CategoryName作为mybooks FROM Books JOIN Category ON Category.id=mybooks.catId，其中mybooks.catId='+catId，[]）。然后（数据=>{
如果（data.rows.length>0）{
对于（var i=0；i

下面是类别和书籍数据库的外观

类别

id类别名称

1.“金融”

2.“沟通”

书

id catId书名

1，1，‘金融101’

2，1，“基本经济”

3、2，“关键对话”

---

4，2，“影响”

代码中发生了大量异步操作。请按顺序执行。 在.ts文件中进行更改，而不是使用字符串插值

---

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

这是否回答了您的问题？这不是对您问题的回答，但如果是这样的话，那么在服务调用中您似乎正在从客户端传递原始SQL是一个坏主意这就是它的实际用途…

this.database.executeSql（）

为什么要使用插值？请在ts中使用此代码，这样您的调用将是同步的，并且可以轻松处理以在上进行渲染html@NiangMoore在订阅中调用你的类别调用grtbooks.创建一个映射，一旦所有操作完成..然后在html中使用该映射..在你当前的代码中有很多异步代码..使其有序..@minigeek谢谢你的建议奏效了！