如何在Angular中获取async Observable数组的总条目数？

你遇到的问题很典型——avisosTest是一个Observable<Aviso[]>类型，它本身并没有length属性，length是数组的专属属性。只有当Observable发出实际的数组数据后，我们才能拿到这个数组的长度。下面给你两种常用的解决方案：

方法一：使用async管道配合模板变量（推荐） #

Angular的async管道不仅能帮你在模板里订阅Observable，还能把发出的数组数据存到一个模板变量里，这样就能直接获取数组的length了。同时Angular会自动处理订阅的取消，避免内存泄漏。

模板代码示例：

<!-- 先用*ngIf把Observable转换成数组并存到变量里 -->
<div *ngIf="avisosTest | async as avisos">
  <!-- 直接使用变量的length属性 -->
  <p>总条目数: {{ avisos.length }}</p>
  
  <!-- 遍历数组的时候直接用这个变量 -->
  <div *ngFor="let aviso of avisos; let i = index">
    <!-- 这里渲染单个aviso的内容，比如 {{ aviso.title }} -->
  </div>
</div>

方法二：在组件内订阅Observable并存储数组 #

如果你需要在组件逻辑里也用到这个数组，可以手动订阅Observable，把数据存到一个普通数组变量中，然后在模板里直接使用这个变量的length。注意一定要在组件销毁时取消订阅，防止内存泄漏。

组件代码示例：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Aviso } from './你的模型路径';

@Component({
  selector: 'app-avisos',
  templateUrl: './avisos.component.html'
})
export class AvisosComponent implements OnInit, OnDestroy {
  avisosTest: Observable<Aviso[]>;
  // 存储实际的数组数据
  avisos: Aviso[] = [];
  // 用于管理订阅
  private subscription = new Subscription();

  ngOnInit(): void {
    // 订阅Observable，把数据赋值给avisos
    this.subscription.add(
      this.avisosTest.subscribe(data => {
        this.avisos = data;
      })
    );
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.subscription.unsubscribe();
  }
}

模板代码示例：

<p>总条目数: {{ avisos.length }}</p>
<div *ngFor="let aviso of avisos; let i = index">
  <!-- 渲染单个aviso的内容 -->
</div>

总结一下，方法一更简洁安全，推荐优先使用；方法二适合需要在组件逻辑中操作数组的场景。

内容的提问来源于stack exchange，提问作者Paco Zevallos