Question

我正在尝试在应用程序中使用角形材料选择作为组件，以理想的方式在一种形式中多次使用该组件。

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

我们是否像mat-table那样使用数据源？

或其他任何方式请启发我。

请参阅我的stackbliz代码；

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

Answer 1

您可以围绕表单字段创建自己的“包装器”组件并选择组件，并为其提供组件可以理解的“数据源”输入。例如：

select-field-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-field-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上起作用。

如何将数据传递到角形材料选择，以一种形式更多地使用一个选择

1 个答案: