时间戳

首页 > 解决方案 > Angular Material Select Dropdown，发出整个对象项，而不仅仅是一个值

angular - Angular Material Select Dropdown，发出整个对象项，而不仅仅是一个值

问题描述

Angular Material 选择下拉 API 只发出一个值。两者都只发出一个成员，[(ngModel)]而(selectionChange)不是整个对象数据字段。

例如，它只发出 food.value = 2，不会发出其他行列表项的类字段，如 foodName、foodDescription、foodWeight 等（需要发出 listId 的所有对应成员）

给定 food.value ，我如何发射整个对象作为食物？需要为将来创建的任何材料下拉菜单工作，而不仅仅是特定情况。Material Angular 是否有任何特定的选项来允许这样做？

下面的答案仅适用于一个特定示例，试图查看更大的图片。

https://material.angular.io/components/select/api

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

类示例，对于 2，需要 foodCategory、Calories 等字段等

export class SelectOverviewExample {
  foods: Food[] = [
    {value: '0', viewValue: 'Steak', foodCategory: 'Meat', Calories: 50},
    {value: '1', viewValue: 'Pizza', foodCategory: 'Carbs', Calories: 100},
    {value: '2', viewValue: 'Apple', foodCategory: 'Fruit', Calories: 25}
  ];
}

有没有人有更好的解决方案？selectionChange否则，将在onOutput 方法 中写入此内容。似乎Angular Materials会有更好的选择，

this.foods.find(x=>x.value =="2")

注意以下解决方案；需要为任何不同的类、具有多种类型的成员等提供解决方案

标签： angulartypescriptangular-materialangular7angular8

解决方案

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods; let i = index" [value]="i" (onSelectionChange)="onValueChange(food)">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

推荐阅读