Angular 是否创建选项卡相关的选择列表？角材料

我使用的是带角材质的angular 7

我有一个选项卡和一个选择列表，我希望选择列表中显示的值取决于选项卡组上的选择

我不确定实现这一点的最佳方法是什么，我在考虑一个函数，它可以创建一个新的列表，在数据中接收两个列表和公共属性作为参数

我的标签组几乎都是字母 然后我会将字母作为属性添加到列表对象中

有更好的方法吗

我的代码如下所示： html

---

我仍然不清楚你的问题。 你能用恰当的方式描述一下吗

<mat-form-field>
  <mat-select (selectionChange)="change($event.value)">
  <mat-option *ngFor="let list of errors" [value]="list.type">
    {{list.type}}
  </mat-option>
</mat-select>
</mat-form-field>
<mat-tab-group [selectedIndex]="selected.value"
               (selectedIndexChange)="selected.setValue($event)">
  <mat-tab *ngFor="let tab of areaList; let index = index" [label]="tab">
    Contents for {{tab}} tab
  </mat-tab>
</mat-tab-group>

 areaList = ['A', 'B', 'C', 'D', 'L', 'T'];
  selected = new FormControl(0);
  errors = [
    { id: 'A7', clientName: 'fd', type: 'A' },
    { id: 'B1', clientName: 'sdfdfsu', type: 'B' },
    { id: 'E3', clientName: 'sdf', type: 'C' },
    { id: 'I2', clientName: 'fsdfu', type: 'D' },
    { id: 'L', clientName: 'sdfsf', type: 'L' },
    { id: 'L', clientName: 'sdfsf', type: 'T' }
  ];
change(event)
  {
      console.log(event);
      this.selected = new FormControl(this.areaList.indexOf(event));    
  }

areaList: string[] = ['A', 'B', 'C', 'D', 'L', 'T'];
  errors = [
    { id: 'A7', clientName: 'fd', type: 'A' },
    { id: 'B1', clientName: 'sdfdfsu', type: 'B' },
    { id: 'E3', clientName: 'sdf', type: 'C' },
    { id: 'I2', clientName: 'fsdfu', type: 'D' },
    { id: 'L', clientName: 'sdfsf', type: 'L' },
    { id: 'L', clientName: 'sdfsf', type: 'T' }
  ];

<mat-form-field>
  <mat-select (selectionChange)="change($event.value)">
  <mat-option *ngFor="let list of errors" [value]="list.type">
    {{list.type}}
  </mat-option>
</mat-select>
</mat-form-field>
<mat-tab-group [selectedIndex]="selected.value"
               (selectedIndexChange)="selected.setValue($event)">
  <mat-tab *ngFor="let tab of areaList; let index = index" [label]="tab">
    Contents for {{tab}} tab
  </mat-tab>
</mat-tab-group>

 areaList = ['A', 'B', 'C', 'D', 'L', 'T'];
  selected = new FormControl(0);
  errors = [
    { id: 'A7', clientName: 'fd', type: 'A' },
    { id: 'B1', clientName: 'sdfdfsu', type: 'B' },
    { id: 'E3', clientName: 'sdf', type: 'C' },
    { id: 'I2', clientName: 'fsdfu', type: 'D' },
    { id: 'L', clientName: 'sdfsf', type: 'L' },
    { id: 'L', clientName: 'sdfsf', type: 'T' }
  ];
change(event)
  {
      console.log(event);
      this.selected = new FormControl(this.areaList.indexOf(event));    
  }