如何移除代理函数isInShoppingCart，直接绑定Observable至[selected]？

你完全不需要手动订阅Observable并维护shoppingCartItems变量，直接利用Angular的**异步管道（async pipe）**就能实现需求，还能避免手动订阅可能带来的内存泄漏问题。

具体实现步骤： #

1. 修改模板代码 #

直接在[selected]绑定中用async管道处理shoppingCart$，同时用数组的some()方法判断当前菜品是否在购物车中：

<mat-list-option 
  *ngFor="let menuItem of menu.emoneyProducts" 
  [selected]="(shoppingCart$ | async)?.some(shoppingCartItem => shoppingCartItem.id === menuItem.id)" 
  [value]="menuItem"
>
  {{ menuItem.title }} {{ menuItem.price | currencyFormat }}
</mat-list-option>

这里用some()代替原来的find()是因为我们只需要一个布尔值（是否存在匹配项），some()会在找到第一个匹配项后就停止遍历，性能更优。?.是可选链操作符，防止shoppingCart$初始值为null/undefined时出现报错。

2. 精简组件代码 #

移除手动订阅的代码、shoppingCartItems变量和isInShoppingCart函数，组件会变得更简洁：

export class DialogRestaurantComponent implements OnInit {
  // 保留你的shoppingCart$ Observable（建议替换any为具体类型）
  shoppingCart$: Observable<ShoppingCartItem[]>;

  constructor() {
    // 这里移除原来的subscribe逻辑
  }

  // 移除isInShoppingCart函数
}

额外小建议 #

尽量不要用any类型，建议定义明确的接口类型，比如：

interface MenuItem {
  id: number;
  title: string;
  price: number;
}

interface ShoppingCartItem {
  id: number;
  // 其他购物车项属性
}

这样代码可读性和健壮性都会提升，IDE也能给你更好的代码提示。

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