Question

我有一个子模板，可以生成一个带有一些条目的表。此表特定于每一天，也就是说，它具有某种“日期”标识符：

@Input() day:number;

现在我想在我的主模板中插入该模板，这是一个标签式的Pane面板，每天有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">。

角度插入基于一些id子模板到主模板中

1 个答案: