Angular 基于某个id将子模板插入主模板

我有一个子模板，它生成一个包含一些条目的表。此表针对每一天，也就是说，它具有某种“日”标识符：

@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>

    ......

名称
{{element.name}
......

所以我的问题是，如何在.ts文件中创建一个特定的子模板表，该表可以按日期识别？我如何将该模板引入到我的选项卡面板模板中，并按日期正确标识

---

我正在为这些组件使用角度材质

您的表包装器组件（您称之为“子模板”）需要通过自己的数据输入为表提供正确的数据。由于表本身并不关心它有哪些数据（

），因此需要通过

组件来控制这些数据。例如：

应用程序：

...
...
getDataSource（日期：字符串）{
//返回匹配日期的数据
}

组成部分：

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

名称
{{element.name}
...
@Input（）myDataSource:任意；

您不必使用

getDataSource（）

函数，只需指向实际的数据对象即可。例如

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