如何通过*ngFor获取items$中首个subscribed为true的元素？

直接用*ngFor实现这个需求不是最优选择，但也能凑出来；更推荐在组件逻辑或者管道里提前处理数据，这样更高效且易维护。

推荐做法：在组件中处理数据流 #

既然你只需要第一个subscribed为true的元素，没必要用*ngFor遍历整个列表，直接在组件里转换Observable即可：

// 组件.ts文件中
import { map } from 'rxjs/operators';

// 假设items$是已定义的Observable数组
firstSubscribedItem$ = this.items$.pipe(
  map(items => items.find(item => item.subscribed === true))
);

然后在模板里直接使用这个处理后的Observable，不用*ngFor：

<ng-container *ngIf="firstSubscribedItem$ | async as item">
  <!-- 这里渲染你的元素内容，比如 {{ item.name }} -->
</ng-container>

非要用*ngFor的实现方式 #

如果因为某些限制必须用*ngFor，可以先在模板里过滤出所有subscribed为true的元素，再只渲染第一个：

<ng-container 
  *ngFor="let item of (items$ | async)?.filter(item => item.subscribed === true); let first = first"
>
  <ng-container *ngIf="first">
    <!-- 这里只渲染第一个符合条件的元素 -->
  </ng-container>
</ng-container>

不过这种方式会遍历所有符合条件的元素，只是只显示第一个，性能和可读性都不如第一种方法，不推荐常规场景使用。

内容的提问来源于stack exchange，提问作者Mădă