![](/img/trans.png)
[英]How to use mat-option as attribute in mat-select in angular 5?
[英]How to use 2 values in 1 mat-option in angular
1 mat-option
是否可以有 2 个值。
我怎样才能用角材料实现这种代码?
<mat-select formControlName="type">
<mat-option [fruit,place]="mango,india">
fruit:mango, place: india
</mat-option>
</mat-select>
您可以使用一个对象或一个字符串数组来实现此目的:
在字符串数组的情况下,数据结构将是:
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'}
];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.