获取项目的长度 ngFor async / Observable<Aviso[]>;

Question

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

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

我正在使用带有 Observable 的 Firebase 的 Firestore：

avisosTest: Observable<Aviso[]>;

我试过这个，但没有用

{{ avisosTest.length }}

{{ avisosTest?.length }}

Answer 1

在 Angular 4 中你可以这样做：

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

然后你可以{{ avisosTest.length }}在该标签内调用。

例子

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

工作演示- 等待 2 秒数据加载

如果您需要在循环之外使用它，您可以将asyncand分开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>

工作演示 - 等待 2 秒数据加载