Содержание проекции внутри таблицы угловых материалов

Question

Вместо обычного способа отображения данных в таблице.Я пытаюсь создать компонент пользовательской таблицы и проецировать данные в таблице материалов с помощью.

следующим образом:

<table mat-table [dataSource]="dataSource">
	<!-- I want to Render the header and cell data here -->
	<ng-content></ng-content>
	
	<mat-header-row *matHeaderRowDef="headers; sticky: true"></mat-header-row>
	<mat-row *matRowDef="let row; columns: headers;"></mat-row>
</table>

Так что я могу назвать этот настроенный компонент следующим образом:

<app-customized-table>
	<ng-container matColumnDef="id">
		<mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
		<mat-cell *matCellDef="let element"> {{element.Id}} </mat-cell>
	</ng-container>
	...etc
</app-customized-table>

Однако контент не будет обнаружен.Вот пример стека, который я пытаюсь сделать.

https://stackblitz.com/edit/angular-qwvcln?file=src%2Fapp%2Fcustom-table.component.ts

Есть ли способ сделать это?

Спасибо.

Answer 1

Вы должны будете использовать совсем другой подход, чтобы заставить это работать. Как вы заметили, mat-table не может содержать содержимое в другом месте. Возможность заключается в предоставлении только данных для вашего пользовательского компонента, а не DOM в качестве контента. Например:

Компонент:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-custom-table',
  template: `
    <div>
      {{name}}

      <div class="example-container mat-elevation-z8">
        <table mat-table [dataSource]="dataSource">

          <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

          <ng-container *ngFor="let column of displayedColumns; index as i" >

            <ng-container [matColumnDef]="column">
              <mat-header-cell *matHeaderCellDef>{{ columnLabels[i] }}</mat-header-cell>
              <mat-cell mat-cell *matCellDef="let element"> {{element[valueKeys[i]]}} </mat-cell>
            </ng-container>

          </ng-container>

        </table>
      </div>

      asd
    </div>
  `
})
export class CustomTable implements OnInit {
  @Input() public columnLabels: any[];
  @Input() public displayedColumns;
  @Input() public dataSource;
  @Input() public name: any;
  @Input() public valueKeys: any[];

  constructor() { }

  ngOnInit() {
  }

}

Использование:

<app-custom-table name="sdf" 
    [dataSource]="dataSource" 
    [displayedColumns]="displayedColumns"
    [columnLabels]="columnLabels" 
    [valueKeys]="displayedColumns">

</app-custom-table>

Где:

displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
columnLabels = ['No.', 'Name', 'Weight', 'Symbol'];

Но даже в этом случае могут возникнуть некоторые проблемы.