將基於某些ID的角度插入子模板插入主模板

Question

我有一個子模板，可以生成帶有一些條目的表。 該表是特定於每一天的，這意味着它具有某種“天”標識符：

@Input() day:number;

現在，我想將該模板插入到我的主模板中，該主模板是一個選項卡式窗格面板，每天有7個選項卡。 我想將相應的數據表和每天的數據插入相應的天選項卡。 根據日期ID或其他日期標識符，我該怎么做？

這是我的標簽模板：

<mat-tab label = "Monday">
<app-sub-template-per-day></app-sub-template-per-day>
.....

  <mat-tab label = "Tuesday">
  <app-sub-template-per-day></app-sub-template-per-day>
.....

我的子模板表是：

<mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    ......

所以我的問題是，如何在.ts文件中創建可以通過日期區分的特定子模板表？ 以及如何將該模板帶入當天正確識別的選項卡面板模板中？

我正在為這些組件使用角材

Answer 1

您的表包裝器組件（稱為“子模板”）需要注意通過其自己的數據輸入為表提供正確的數據。 由於表本身並不關心它擁有的數據（ <mat-table [dataSource]="dataSource"> ），因此您需要通過<app-sub-template-per-day>組件來控制該數據。 例如：

應用程式：

<mat-tab label = "Monday">
<app-sub-template-per-day [myDataSource]="getDataSource('Monday')"></app-sub-template-per-day>
...

<mat-tab label = "Tuesday">
<app-sub-template-per-day [myDataSource]="getDataSource('Tuesday')"></app-sub-template-per-day>
...

getDataSource(day: string) {
    // return the data for the matching day
}

零件：

<mat-table [dataSource]="myDataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    ...
</mat-table>

@Input() myDataSource: any;

您不必使用getDataSource()函數-您只需指向實際的數據對象即可。 例如<app-sub-template-per-day [myDataSource]="myData.monday"> 。