时间戳

首页 > 解决方案 > 制作一个选项卡相关的选择列表？角 7 材料

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

问题描述

我正在使用带有角材料的角 7。

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

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

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

有一个更好的方法吗？

我的代码看起来像这样：（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' }
  ];

标签： angulartypescript

解决方案

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

推荐阅读