Question

这是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。有什么好的方法可以做到这一点吗？

Answer 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;
}

如有任何问题，请告诉我。

Typescript-如何提取对象数组中的对象？

1 个答案: