таблица материалов с компонентом Dynami c - PullRequest
1 голос
/ 04 августа 2020

Я хотел бы иметь возможность динамически отображать любой компонент в mat-table.

Я максимально упростил свой код для цели этого вопроса:

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

    <ng-container *ngFor="let column of displayedColumns; trackBy: trackByTableElement;"
                  [matColumnDef]="column.columnId">

        <div>{{column.columnName}}</div>

        <ng-container>

            <th mat-header-cell *matHeaderCellDef [mat-sort-header]="column.columnId"
                [disabled]="!column.sortable" [hidden]="column.hiddenColumn">
            </th>

            <td mat-cell *matCellDef="let element; let index = index">
                
                <ng-template #customTemplate>

                </ng-template>

            </td>
        </ng-container>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnIds"></tr>
    <tr mat-row *matRowDef="let row; columns: columnIds;"></tr>

</table>
@Component({
  selector: 'app-table-component',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent<T> implements OnChanges {

  @Input() elements: TableElement<T>[];
  @Input() displayedColumns: TableColumn[];

  dataSource: MatTableDataSource<any>;
  columnIds: string[] = [];

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.elements) {
      this.refreshDataSource();
    }
    if (changes.displayedColumns) {
      this.columnIds = this.displayedColumns.filter(column => !column.hiddenColumn).map(column => column.columnId);
    }
  }

  refreshDataSource() {
    this.dataSource = new MatTableDataSource(this.elements);

    this.initPaginator();
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  trackByTableElement(index, item: TableElement<T>) {
    return item;
  }

}
export class AdiTableColumn {
    columnName: string;
    columnId: string;

    // CUSTOM
    _customComponent?: Type<any>;
    _customComponentParameters?: (element, index?) => { [id: string]: any; };
}

Я хотел бы использовать customComponent и customComponentParameters для генерации представлений, но я не знаю, как получить ссылки на все #cutstomTemplate.

Любые идея?

Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...