制作一个选项卡相关的选择列表？角 7 材料答案

【问题标题】：make a Tab Dependent Selection List? Angular 7 Materials制作一个选项卡相关的选择列表？角 7 材料
【发布时间】：2024-05-19 17:40:02
【问题描述】：

我正在使用 Angular 7 和 Angular 材质。

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

不确定实现这一点的最佳方法是什么，我在想一个函数，它可以从字面上创建一个新列表，接收数据中的 2 个列表和共同的属性作为参数。

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

有没有更好的方法来做到这一点？

我的代码如下所示： (html)

 <mat-tab class="error-label mat-tab-labels-errors" *ngFor="let areaItem of areaList, let i = index"
<mat-list-option *ngFor="let err of errors" [value]="err.id">

(ts)

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' }
  ];

【问题讨论】：

标签： angular typescript

【解决方案1】：

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

【讨论】：

【解决方案2】：

我仍然不清楚你的问题。能否请您以适当的方式描述它？

【讨论】：