Вот массив 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. Есть ли хороший способ добиться этого?

1
James 7 Ноя 2018 в 03:55

1 ответ

Лучший ответ

Пожалуйста, поправьте меня, если я ошибаюсь, я считаю, что вместо двух массивов вариантов есть один массив. Я создал образец примера на stackblitz . Вам просто нужно создать массив типов.

Вот код ts:

 variants = [
  {
    type: 'color',
    options: ['red', 'green', 'blue']
  },
   {
    type: 'size',
    options: ['M', 'G', 'GG']
  }
]
types = [];
options = [];
ngOnInit(){
this.variants.forEach(t=>this.types.push(t.type));
}
typeChange(type: string) {
  const variant = this.variants.find(v => v.type === type);
  this.options = variant.options;
}

Пожалуйста, дайте мне знать, если у вас возникнут вопросы.

0
Community 20 Июн 2020 в 09:12