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>

FormControl的值将包含列表中检查的所有值的数组。

Answer 2

简短回答：不。

您希望将observable绑定到检查布尔值的条件。这是不可能的（好吧，它是，但它依赖于truthy / falsy而不是你的物品在购物车中）。

A＆＃34;更简单＆＃34;如果你想要的方式是

<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是否在数组中
- 如果是，则将其删除
- 如果不是，请添加

摆脱代理方法

2 个答案: