Angular - 按类别显示项目答案

【问题标题】：Angular - Display Item by CategoryAngular - 按类别显示项目
【发布时间】：2020-07-24 16:12:35
【问题描述】：

我想在其类别下显示书籍，但由于每个类别 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, '影响'

【问题讨论】：

这能回答你的问题吗？ How do I return the response from an asynchronous call?
不是您的问题的答案，但是如果您实际上是在做什么，那么您似乎从客户端传递原始 SQL 的服务调用是一个坏主意...this.database.executeSql()
为什么要用插值法呢？在 ts 中执行此代码，因此您的调用将是同步的，并且可以轻松处理以在 html 上呈现
@NiangMoore 调用您的类别以订阅它调用 grtbooks.. 创建一个地图，一旦完成.. 然后在 html 中使用该地图......在您当前的代码中有很多异步代码..使其顺序..
@minigeek 谢谢你的建议成功了！

标签： javascript angular ionic-framework rxjs ionic4

【解决方案1】：

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

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

【讨论】：