Question

是否可以为1个mat-option使用2个值。

如何用棱角分明的材料实现这种代码？

<mat-select formControlName="type">
        <mat-option [fruit,place]="mango,india">
          fruit:mango, place: india
        </mat-option>
</mat-select>

Answer 1

您可以使用一个对象或字符串数组来实现此目的：

在字符串数组的情况下，数据结构为：

  foods: Food[] = [
    {viewValue: ['mango','india'], value: 'Ind'},
    {viewValue: ['apple','america'], value: 'US'},
    {viewValue: ['banana','colombia'], value: 'Col'}
  ];

如果是对象，则数据结构为：

  foodObj= [
    {viewFruit: 'mango', viewCountry: 'india', value: 'Ind'},
    {viewFruit: 'apple', viewCountry: 'america', value: 'US'},
    {viewFruit: 'banana',viewCountry: 'colombia', value: 'Col'}
  ];

相关的 HTML ：

<h4>Basic mat-select (as string array)</h4>
<mat-form-field>
  <mat-label>Favorite food (as string array)</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      fruit:{{food.viewValue[0]}}, place: {{food.viewValue[1]}}
    </mat-option>
  </mat-select>
</mat-form-field>


<h4>Basic mat-select (as object)</h4>
<mat-form-field>
  <mat-label>Favorite food (as object)</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foodObj" [value]="food.value">
      fruit:{{food.viewFruit}}, place: {{food.viewCountry}}
    </mat-option>
  </mat-select>
</mat-form-field>

相关的 TS ：

import {Component} from '@angular/core';

export interface Food {
  value: string;
  viewValue: string[];
}

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  foods: Food[] = [
    {viewValue: ['mango','india'], value: 'Ind'},
    {viewValue: ['apple','america'], value: 'US'},
    {viewValue: ['banana','colombia'], value: 'Col'}
  ];

  foodObj= [
    {viewFruit: 'mango', viewCountry: 'india', value: 'Ind'},
    {viewFruit: 'apple', viewCountry: 'america', value: 'US'},
    {viewFruit: 'banana',viewCountry: 'colombia', value: 'Col'}
  ];

}

完成working stackblitz here

我可以在1个Mat选项中以角度使用2个值吗

1 个答案: