如何使用 mat-select 在 Angular 中生成多个 select 离子时更新同一组件中的值？

Question

我正在制作一个披萨订购应用程序，我有一个 MenuComponent，它列出了餐厅提供的所有菜单项。

现在此项目显示为div带有所有信息的身份证。此外，我还提供了一个选项来自定义具有多种配料的项目。

现在的问题是我正在显示商品的基本价格，一旦用户选择了额外的浇头，我想更新基本价格并添加额外费用。

这是我的 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 标签是我显示基本价格的地方，也是我想在选择额外浇头时更新它的地方。我在某处读到使用 2 方式绑定方法，但现在我没有任何想法和卡住，不知道如何进一步进行。

以及如何仅反映该特定项目的更改。

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"，您还可以简单地使用 map 函数。

如何使用 mat-select 在 Angular 中生成多个 select 离子时更新同一组件中的值？

How to update the values in the same component on making multiple selections in Angular using mat-select?

angular

typescript

data-binding

angular-material

angular-material2