如何使用 mat-select 在 Angular 中生成多个 select 离子时更新同一组件中的值?
How to update the values in the same component on making multiple selections in Angular using mat-select?
我正在制作一个披萨订购应用程序,我有一个 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 方式绑定方法,但现在我没有任何想法和卡住,不知道如何进一步进行。
以及如何仅反映该特定项目的更改。
您可以创建一个新组件,代表一个菜单项,我们称它为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 函数。
我正在制作一个披萨订购应用程序,我有一个 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 方式绑定方法,但现在我没有任何想法和卡住,不知道如何进一步进行。
以及如何仅反映该特定项目的更改。
您可以创建一个新组件,代表一个菜单项,我们称它为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 函数。