Как обновить значения в одном и том же компоненте при множественном выборе в Angular с помощью mat-select?

Question

Я делаю приложение для заказа пиццы, и у меня есть MenuComponent, в котором перечислены все пункты меню, предоставляемые рестораном.

Теперь эти элементы отображаются в виде отдельных карточек со всей информацией. Также я предоставляю возможность настроить предмет с несколькими начинками.

Теперь проблема в том, что я отображаю базовую цену товара, как только пользователь выбирает дополнительный топпинг, я хочу обновить базовую цену с добавлением дополнительных затрат.

Вот как выглядит мой menu.component. html выглядит так:

    <div fxFlex *ngFor="let category of categories">
        <h3>{{category.name}}</h3>
            <div *ngFor="let item of items">
                <mat-card *ngIf="item.category == category.name" class="itemcard">

                    <mat-card-header>

                        <mat-card-title>{{item.name}}</mat-card-title>
                        <mat-card-subtitle>{{item.category}}</mat-card-subtitle>
                        <span class="flex-spacer"></span>
                        <div>$ {{item.price_large}}</div>
                    </mat-card-header>
                    <mat-card-content>
                        <mat-form-field>
                            <mat-label>Extra Toppings</mat-label>
                            <mat-select multiple>
                                <mat-option *ngFor="let topping of toppings" [value]="topping.rate">{{topping.name}}</mat-option>
                            </mat-select>
                        </mat-form-field>
                    </mat-card-content>
                    <span class="flex-spacer"></span>

                    <button mat-button color="primary"><i class="fa fa-plus-circle"></i> Add to Cart</button>
                </mat-card>

            </div>
    </div>

тег div - это место, где я отображаю базовую цену, а также то же место Я хочу обновить его, когда будут выбраны дополнительные начинки. Я где-то читал, чтобы использовать двухсторонний подход к связыванию, но сейчас я не получаю никакого удовольствия от мыслей и застрял, и не знаю, как действовать дальше.

А также как отражать только изменения для этот конкретный предмет.

Answer 1

Вы можете создать новый компонент, представляющий пункт меню, назовем его MenuItemComponent. Передайте 'item' и 'category' в качестве переменных этому компоненту, используя отношение родитель-потомок (это может помочь https://angular.io/guide/component-interaction), и добавьте переменную, представляющую выбранную цену вылова. Добавьте обработчик событий в select, чтобы он обновил эту переменную. Так что наш новый компонент будет выглядеть так:

@Component({
    selector: 'app-menu-item',
    templateUrl: './menuitem.component.html'
  })
  export class MenuItemComponent {
    @Input() item;
    @Input() category;
    private chosenToppingPrice = 0;

    constructor(){}

    onToppingSelect(event){
      this.chosenToppingPrice = event.target.value;
    }
  }

И это HTML будет выглядеть так:

<mat-card *ngIf="item.category == category.name" class="itemcard">
    <mat-card-header>
        <mat-card-title>{{item.name}}</mat-card-title>
        <mat-card-subtitle>{{item.category}}</mat-card-subtitle>
        <span class="flex-spacer"></span>
        <div>$ {{item.price_large + chosenToppingPrice}}</div>
    </mat-card-header>
    <mat-card-content>
        <mat-form-field>
            <mat-label>Extra Toppings</mat-label>
            <mat-select multiple>
                <mat-option *ngFor="let topping of toppings" [value]="topping.rate" (change)="onToppingSelect($event)">{{topping.name}}</mat-option>
            </mat-select>
        </mat-form-field>
    </mat-card-content>
    <span class="flex-spacer"></span>
    <button mat-button color="primary"><i class="fa fa-plus-circle"></i> Add to Cart</button>
</mat-card>

И, наконец, menu.component. html будет выглядеть так:

<div fxFlex *ngFor="let category of categories">
    <h3>{{category.name}}</h3>
    <div *ngFor="let item of items">
        <app-menu-item [item]="item" [category]="category"></app-menu-item>
    </div>
</div>

Это может быть немного длинно, но таким образом вы можете манипулировать данными каждой карты отдельно.

Кроме того, вместо использования *ngIf="item.category == category.name", вы можете просто используйте функцию карты.