angular - 获取项目的长度 ngFor async/Observable;

Question

如何使用 ngFor 获取项目总数？

*ngFor="let aviso of avisosTest | async; let i = index"

我正在使用 Firebase 的 Firestore 和 Observable:

avisosTest: Observable<Aviso[]>;

我试过了，没用

{{ avisosTest.length }}

{{ avisosTest?.length }}

Answer 1

在 Angular 4 中你可以这样做:

*ngFor="let aviso of avisosTest | async as aviso; let i = index"

然后您可以在该标记内调用 {{ avisoTest.length }}。

例子

<ul>
  <li *ngFor="let aviso of avisosTest | async as aviso; let i = index">
    {{aviso}} - {{i + 1}} of {{aviso.length}}
  </li>
</ul>

Working Demo - 等待 2 秒数据加载

如果你需要在循环之外，你可以将async和ngFor分开，比如:

<div *ngIf="avisosTest | async as aviso">
  <ul>
    <li *ngFor="let aviso of aviso; let i = index">
      {{aviso}}
    </li>
  </ul>
  <div>
    {{aviso.length}} items total
  </div>
</div>

Working Demo - 等待 2 秒数据加载