как передать данные в угловой материал выберите, чтобы использовать более одного выберите в одной форме

Question

Я пытаюсь использовать угловой материал select в качестве компонента в моем приложении, чтобы идеально использовать этот компонент в нескольких местах в одной форме.

, но мой вопрос заключается в том, как передать данные в каждый из этих компонентов selectзагрузить с другими данными.

это то, что мы как источник данных используем как источник данных?

или каким-либо другим способом, пожалуйста, просветите меня.

см. Мой код стекаблиза;

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 .