时间戳

首页 > 解决方案 > 如何在角度的 1 个 mat-option 中使用 2 个值

angular - 如何在角度的 1 个 mat-option 中使用 2 个值

问题描述

1 是否可以有 2 个值mat-option。

我怎样才能用角材料实现这种代码？

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

标签： angularangular-material

解决方案

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

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

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

在object的情况下，数据结构将是：

  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'}
  ];

}

在这里完成工作堆栈闪电战

推荐阅读