Angular模板中async管道结合.find报错，求可行解决方案

错误原因 #

1. Angular模板中禁止使用this关键字，你写的this.item.product.partKey需去掉this，直接用item.product.partKey（前提是item是组件类中公开的属性）。
2. pt.products.find(...)可能返回undefined（比如找不到匹配的产品），直接链式访问.color.value会触发空值错误，必须添加空值保护。
3. 模板标签存在拼写错误：<componenetOne>多写了一个n，应改为<componentOne>；闭合标签</item>是错误的，需对应改为</componentOne>。

方案一：模板内直接修正并添加空值保护 #

通过额外的*ngIf提前捕获筛选后的产品，既解决空值问题，又能保留pt对象供其他组件使用：

<ng-container *ngIf="pt$ | async as pt">
  <componentOne 
    *ngIf="pt.products.find(product => product.partKey === item.product.partKey) as targetProduct"
    [color]="targetProduct.color.value">
  </componentOne>

  <componentTwo [pt]="pt"></componentTwo>
</ng-container>

方案二：组件类封装筛选逻辑（更推荐） #

把筛选逻辑移到组件类中，让模板只负责展示，更符合Angular最佳实践：

1. 组件类中添加方法：

// 替换YourPtType为pt$对应的实际类型
getTargetProductColor(pt: YourPtType): string | undefined {
  const targetProduct = pt.products.find(product => product.partKey === this.item.product.partKey);
  return targetProduct?.color.value;
}

2. 模板中调用方法：

<ng-container *ngIf="pt$ | async as pt">
  <componentOne [color]="getTargetProductColor(pt)"></componentOne>
  <componentTwo [pt]="pt"></componentTwo>
</ng-container>

方案三：自定义管道复用筛选逻辑 #

如果多个组件需要相同的筛选逻辑，可以封装成管道：

1. 创建管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'findProductByPartKey' })
export class FindProductByPartKeyPipe implements PipeTransform {
  transform(products: any[], partKey: string): any | undefined {
    return products.find(product => product.partKey === partKey);
  }
}

（记得在对应模块中声明该管道）
2. 模板中使用：

<ng-container *ngIf="pt$ | async as pt">
  <componentOne 
    *ngIf="pt.products | findProductByPartKey: item.product.partKey as targetProduct"
    [color]="targetProduct.color.value">
  </componentOne>
  <componentTwo [pt]="pt"></componentTwo>
</ng-container>

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