如何在 FirebaseListObservable 中查找元素的数量

Question

在我的 angular2 应用程序中，我使用查询从 Firebase 数据库中检索数据并将其存储在 FirebaseListObservable 中。在我的 getStatus 方法中，我想找出 FirebaseListObservable 中的元素数量。如果列表有任何元素，我想返回“glyphicon-ok”，如果列表为空，我想返回“glyphicon-remove”。我在下面分享了我的代码，但它不起作用。

组件.ts

assignments: FirebaseListObservable<any>
submission: FirebaseListObservable<any>

ngOnInit() {
this.assignments = this._getAsnService.getAsnByCourseBatch(AuthService.courseBatch);
}

getStatus(asnDetailKey) {
  //  Searching assignment in database
  this.submission = this._db.list(`/submissions/${AuthService.uid}/`, {
    query: {
      orderByChild: 'asnDetailKey',
      equalTo: asnDetailKey
    }
  });

  //  If assignment is found return 'glyphicon-ok' else return 'glyphicon-remove'
  this.submission.subscribe(sub => {
    this.status = sub.length > 0 ? 'glyphicon-ok' : 'glyphicon-remove';
  });

  return this.status;
} 

component.html

<table class="table table-bordered" *ngIf="!isLoading">
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Due Date</th>
      <th>Status</th>
    </tr>
    <tr *ngFor="let assignment of assignments | async" [hidden]="filter(assignment)">
      <td> <span class="AsnName" [routerLink]="['view', assignment.$key]"> {{ assignment.AsnName }} </span> </td>
      <td> {{ assignment.subject }} </td>
      <td> {{ assignment.dueDate }} </td>
      <td> <i class="glyphicon" [ngClass]="getStatus(assignment.$key)"></i> </td>  // <==== calling getStatus(assignment.$key)
    </tr>
</table>

谢谢。

Answer 1

更新：我第一次误解了你的意思。听起来您想进行初始调用以获取分配，然后在 ngFor 中呈现这些分配。此时，您需要对每个项目进行额外调用，以确定该 ngFor 迭代中应该出现哪种图标。

这就是我想出的 (https://plnkr.co/edit/UqHDzZMlkNQ0mXfuoIO2?p=info)。本质上，每个 ngFor 迭代都使用异步管道调用 getClass() 方法。此时，一个 observable 被创建并存储在组件中。这不是很优雅，因为 getClass() 方法在 ngClass 等待响应时被多次触发。 （你可以在控制台看到这个）

可能有更好的方法来做到这一点。也许使用 async/await 函数 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)

作为一种可能的替代方案，我会在使用 ngFor 渲染之前预取所有您需要的数据。这样你就可以完全避免异步响应 + ngClass。

---

您可以订阅组件中的 observable（而不是使用异步管道）并在分配返回后确定颜色。

// component.ts
getStatus(asnDetailKey){
    this.submission = this._db.list(`/submissions/${AuthService.uid}/`, {
        query: {
            orderByChild: 'asnDetailKey',
            equalTo: asnDetailKey
        }
    }).subscribe(
        res => {
            this.assignments = res;
            this.color = res.length !== 0 ? 'green' : 'red';
        },
        err => {}
    )
}

// component.html
<i class="glyphicon glyphicon-ok" [style.color]="color"></i>