Угловая вставка подшаблона в основной шаблон на основе некоторого идентификатора

Question

У меня есть суб-шаблон, который генерирует таблицу с некоторыми записями.Эта таблица специфична для каждого дня, это означает, что у нее есть некоторый идентификатор «дня»:

@Input() day:number;

Теперь я хочу вставить этот шаблон в мой основной шаблон, который представляет собой панель панели с вкладками, которая имеет7 вкладок на каждый день.Я хочу вставить соответствующую таблицу данных с моими данными за каждый день в соответствующие закладки дня.На основе идентификатора дня или другого идентификатора дня ... как мне лучше всего это сделать?

Это мой шаблон вкладок:

<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">.