Question

我具有物料表的此列配置：

columns = [
    { columnDef: 'firstName', header: 'FirstName',    cell: (user) => `${user.firstName}` },
    { columnDef: 'lastName',     header: 'LastName',   cell: (user) => `${user.lastName}`     },
    { columnDef: 'mobile',   header: 'Mobile', cell: (user) => `${user.mobile}`   },
    { columnDef: 'email',   header: 'Email', cell: (user) => `${user.email}`   },
  ];

我想通过ngFor循环制作垫子桌子，像这样：

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

    <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
      <mat-header-cell *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
      <mat-cell *cdkCellDef="let row">{{ column.cell(row) }}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

一切都很好，但是如果我想在表格单元格中传递一些html模板或组件，例如，如果我想要列，那将是打开用户编辑对话框的按钮。

我已经尝试过这种方式：

  <mat-cell *cdkCellDef="let row" [innerHTML]="<test-component></test-component> | safeHTML"></mat-cell>

和组件：

@Component({
  selector: 'test-component',
  template: `  
      <button (click)="openEditDialog()">test</button>
  `,
})
export class TestComponent implements OnInit {

它有效，但是我不能使用数据绑定，例如，通过@Input将一些数据放入组件。哪里做错了，还是有另一种方法可以实现呢？任何建议将不胜感激）

有角度的。如何将动态组件传递给垫台单元？

0 个答案: