Question

在我的angular2应用程序中，我使用查询从Firebase数据库中检索数据并将其存储在FirebaseListObservable中。在我的getStatus方法中，我想找出FirebaseListObservable中的元素数量。如果列表中包含我想要返回的任何元素＆＃39; glyphicon-ok＆＃39;，如果列表为空，我想返回＆＃39; glyphicon-remove＆＃39;。我已经在下面分享了我的代码，但无效。

component.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并将其存储在组件中。这不是超级优雅，因为在ngClass等待响应时多次触发getClass（）方法。（你可以在控制台中看到这个）

可能有更好的方法来做到这一点。也许使用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>

如何在FirebaseListObservable中查找元素数量

1 个答案: