Question

我有一个8型的应用程序，并且正在使用材料。

，我有四个类别。但是我只想显示一个单独类别的数据。在这种情况下，Intercviews

我的模板如下所示：


<mat-tab-group
      (selectedTabChange)="onTabChange($event)"
      [selectedIndex]="selectedTab"
      (selectedIndexChange)="setTabState($event)"
    >
      <mat-tab [label]="tab.name" *ngFor= "let tab of tabs" >
        <div class="mat-elevation-z8 table-container">
          <table *ngIf = "tab.dataSource && tab.dataSource.data"  mat-table [dataSource]="tab.dataSource" matSort aria-label="Elements">

            <ng-container matColumnDef="title">
              <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Title</th>
              <td mat-cell *matCellDef="let row">{{ row?.title }}</td>
            </ng-container>



            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row [routerLink]="['..', row?.id]" *matRowDef="let row; columns: displayedColumns"></tr>
          </table>
        </div>

           <ng-template mat-tab-label #itemList let-itemType="itemType">
            <mat-icon class="interviews">speaker_notes</mat-icon>
            <span i18n>Interview reportssss</span>({{ countIntervieuws()}})
            <a [routerLink]="['../', dossier.id, 'item', 'new', itemTypes.Interview]"
              ><mat-icon class="add_box">add</mat-icon>
            </a>
          </ng-template>
      </mat-tab>


    </mat-tab-group>

我在此属性中看到：

countIntervieuws

这是两种类型的采访。但这是ts代码：


ngOnInit(): void {

    this.activeTab = this.tabs[0];
    this.loadData().subscribe(data => {

      const resultInterview = this.dossierItems.filter(i => i.itemType === this.itemTypes.Interview ).length;

      this.activeTab.dataSource = new MatTableDataSource(data);     
    });

    const state = this.uiStateService.getState();
    if (state) {
      this.selectedTab = state.tabState || 0; // If there is no state
    }
    this.setTabState(state.tabState);
  }

  dossierItemsCountBy(itemType: DossierItemTypeDto) {
    return this.typeSearchMatches[itemType.toString()] || { total: 0, matches: 0 };
  }

和dto：

export type DossierItemTypeDto = 'Interview' | 'Note' | 'Goal' | 'ActionStep';

export const DossierItemTypeDto = {
  Interview: 'Interview' as DossierItemTypeDto,
  Note: 'Note' as DossierItemTypeDto,
  Goal: 'Goal' as DossierItemTypeDto,
  ActionStep: 'ActionStep' as DossierItemTypeDto
};

但是现在在ngOninit（）中所有项目都已加载。不仅是inteview类型的项目。

因为这一行：

  this.activeTab.dataSource = new MatTableDataSource(data);

当然会返回所有的项目。但我只想返回类型为=采访的项目

那么现在如何只加载Interview类型的项目呢？

谢谢

如何在MatTableDataSource中显示特定数据？

0 个答案: