如何仅在Angular模板中去除*ngFor遍历observable列表的重复值？

• 第一步：先将Observable的异步结果缓存为模板局部变量，避免多次订阅造成性能损耗，同时方便后续直接访问数组元素
• 第二步：在ngFor中声明当前项的索引i，添加ngIf条件判断，当前项的orderPrefixId没有在之前的数组项中出现过才渲染对应内容

<!-- 先缓存异步结果到模板变量，避免重复订阅 -->
<ng-container *ngIf="sandbox.orderList$ | async as orderList">
  <div class="order-list-row" *ngFor="let list of orderList; let i = index">
    <div class="olr-header flex">
      <div class="olrh-lft flex">
        <div class="olrh-lft-col">
          <h5>주문코드</h5>
          <!-- 仅当前面没有相同orderPrefixId时才渲染该字段 -->
          <p *ngIf="!orderList.slice(0, i).some(item => item.orderPrefixId === list.orderPrefixId)">
            {{list.orderPrefixId}}
          </p>
          <!-- 重复的orderPrefixId可渲染空占位保持布局一致 -->
          <p *ngIf="orderList.slice(0, i).some(item => item.orderPrefixId === list.orderPrefixId)">&nbsp;</p>
        </div>
      </div>
    </div>
  </div>
</ng-container>

原理说明：slice(0,i)会截取当前索引之前的所有数组元素，some方法遍历判断是否存在相同的orderPrefixId，如果不存在才渲染当前值，完全不需要修改组件层代码，纯模板层实现。

• 双层*ngFor场景适配：如果是内层列表局部去重，就用内层遍历的数组做slice判断；如果是跨外层分组的全局去重，就用最外层的完整数组做判断，同时声明好两层的索引变量即可。
• 低版本Angular兼容：如果模板中不识别数组的some方法，可以用$any()包裹数组消除类型检查报错：

  *ngIf="!$any(orderList.slice(0, i)).some(item => item.orderPrefixId === list.orderPrefixId)"
  

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