如何将数据传递给 angular material select 以在一种形式中使用更多 select

Question

我正在尝试在我的应用程序中使用 angular material select 作为组件，以便理想地以一种形式在多个位置使用该组件。

但我的问题是如何将数据传递给每个 select 组件以加载不同的数据。

是否有像 mat-table 这样的方式，我们为此使用数据源吗？

或者其他方式请赐教。

参考我的stackbliz代码；

https://stackblitz.com/edit/angular-hfdyev?file=app%2Fselect-value-binding-example.html

Answer 1

您可以围绕表单字段和 select 组件创建您自己的 'wrapper' 组件，并为其提供组件能够理解的 'datasource' 输入。例如：

select-字段-component.ts

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

@Component({
    selector: 'select-field',
    templateUrl: 'select-field-component.html'
})
export class SelectFieldComponent {
    @Input() datasource: any[];
    @Input() label: string;
    @Input() labelKey: string;
    @Input() value: any;
    @Input() valueKey: string;
}

select-字段-component.html

<mat-form-field>
    <mat-label *ngIf="label">{{label}}</mat-label>
    <mat-select [(value)]="value">
        <mat-option *ngFor="let item of datasource" [value]="item[valueKey]">
            {{item[labelKey]}}
        </mat-option>
    </mat-select>
</mat-form-field>

显然，这是一个简单的示例 - 您可以添加更多功能。这是在 StackBlitz.

上执行的

如何将数据传递给 angular material select 以在一种形式中使用更多 select

how to pass data to angular material select to use more the one select in one form

angular-material-5