摆脱代理方法

Question

目前我最初正在检查是否应该选择一个项目：

<mat-list-option *ngFor="let menuItem of menu.emoneyProducts"
                 [selected]="isInShoppingCart(menuItem)"
                 [value]="menuItem">
    {{ menuItem.title }} {{ menuItem.price | currencyFormat }}
</mat-list-option>

但是，要检查的值在可观察量中，因此我必须为此创建一个代理函数：

...
export class DialogRestaurantComponent implements OnInit {
    ...
    constructor() {
        this.shoppingCart$.subscribe(menuItems => this.shoppingCartItems = menuItems);
    }
    ...
    isInShoppingCart(menuItem: any) {
        return this.shoppingCartItems.find((shoppingCartItem: any) =>
            shoppingCartItem.id === menuItem.id) !== undefined;
        }
    }

有没有办法摆脱isInShoppingCart，所以shoppingCart$直接绑定到[selected]？

Answer 1

您可以将 ngModel 或 ReactiveForm 绑定到整个列表：

<ng-container [formGroup]="form">
    <mat-selection-list formControlName="subscriptions">
        <mat-list-option *ngFor="let subscription of subscriptions" [value]="subscription.id">
            {{subscription.name}}
        </mat-list-option>
    </mat-selection-list>
</ng-container>

窗体控件的值将包含在列表中选中的所有值的数组。

Answer 2

简短回答：否。

您希望将可观察量绑定到检查布尔值的条件。这是不可能的(嗯，确实如此，但它依赖于真实/虚假，而不是您的商品是否在购物车中(。

如果你愿意，一个"更简单"的方法是

<mat-list-option *ngFor="let menuItem of menu.emoneyProducts"
                 [selected]="selected.includes(menuItem.id)"
                 (click)="selected.includes(menuItem.id) ? selected.push(menuItem.id) : selected.slice(selected.indexOf(menuItem.id, 1))"
                 [value]="menuItem">

在您的组件 TS 中，您只有：

selected: string[] = [];

算法：

• 如果项的 id 包含在所选数组中，则选择该项
• 单击时，检查项目 ID 是否在数组中
  • 如果是，则将其删除
  • 如果不是，则添加它