Question

我有一个带有动态列的表（例如此处的示例-https://github.com/angular/material2/issues/5927）：

<!-- Generic column definition -->
<ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
  <md-header-cell *cdkHeaderCellDef>{{ column.header }}</md-header-cell>
  <md-cell *cdkCellDef="let row">{{ column.cell(row) }}</md-cell>
</ng-container>

columns = [
  { columnDef: 'userId',    header: 'ID',       cell: (row: UserData) => `${row.id}`        },
  { columnDef: 'userName',  header: 'Name',     cell: (row: UserData) => `${row.name}`      },
  { columnDef: 'progress',  header: 'Progress', cell: (row: UserData) => `${row.progress}%` }
];

displayedColumns = this.columns.map(x => x.columnDef);

这按预期与对象值一起工作。

我在对象中有一个departmentId属性，我想加载部门标题，因此我尝试了以下操作：

columns = [
  { columnDef: 'userId',     header: 'ID',         cell: (row: UserData) => `${row.id}`        },
  { columnDef: 'userName',   header: 'Name',       cell: (row: UserData) => `${row.name}`      },
  { columnDef: 'department', header: 'Department', cell: (row: UserData) => `${this.getDepartmentName(row.departmentId)}` }
];

但是函数永远不会被调用。谁能让我知道我在做错什么，以及如何以正确的方式解决这个问题？在初始化columns变量之前，我已经加载了所有部门值。

编辑：

目前，我正在通过以下方式解决此问题：

forkJoin(
      this.settingsService.getDepartments(),
      this.settingsService.getEmployees()
    ).subscribe(([departments, employees]) => {
      this.departments = departments;
      this.employees = employees;

      this.employees.forEach(e => {
        e.department = this.getDepartmentName(e.departmentId);
      });

      this.dataSource.data = employees;

然后我可以在row.department中使用columns，但我认为这不是正确的方法。

带有功能调用的Angular 7动态列

0 个答案: