Вот массив variants
:
[
{
type: 'color',
options: ['red', 'green', 'blue']
},
{
type: 'size',
options: ['M', 'G', 'GG']
}
]
Во-первых, мне нужно получить массив type
, например, types = ['color', 'size']
. Затем я буду использовать этот массив внутри mat-select
:
<mat-select placeholder="Types" (selectionChange)="typeChange($event.value)">
<mat-option *ngFor="let type of types" [value]="type"> {{type}} </mat-option>
</mat-select>
Во-вторых, мне нужно заполнить массив options
, отфильтровав массив variants
, чтобы найти правильный тип:
typeChange(type: string) {
const variant = this.variants.find(v => v.type === type);
this.options = variant.options;
}
Затем я могу заполнить второй select
параметрами:
<mat-select placeholder="Options">
<mat-option *ngFor="let opt of options" [value]="opt"> {{opt}} </mat-option>
</mat-select>
Мне нужно заполнить эти два mat-selects
массивом variants
. Есть ли хороший способ добиться этого?