Question

任何人都知道是否可以创建一个与mat-table一起使用的“列”组件，我曾尝试为常用列定义创建一个组件，但是当添加到表中时，出现一个找不到的错误列选择器，我的列定义如下：

@Component({
  selector: 'iam-select-column',
  template: `
  <ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef>
      <mat-checkbox></mat-checkbox>
    </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-checkbox></mat-checkbox>
    </mat-cell>
  </ng-container>
  `,
  styles: [`
  `]
})
export class SelectColumnComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

并在表格中使用它

<mat-table class="mat-elevation-z8">

  <iam-select-column></iam-select-column>

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

</mat-table>

和displayColumns是：

  displayedColumns = [
    'select'
  ];

是否可以这样做，因为我想避免在具有选择列的表中重复？

Answer 1

要使其正常工作，您必须使用columnDef方法将该table.addColumnDef手动添加到表中。

@Component({
  selector: 'iam-select-column',
  template: `
    <ng-container matColumnDef="select">
        ...
    </ng-container>
  `
})
export class SelectColumnComponent implements OnInit {
  @ViewChild(MatColumnDef) columnDef: MatColumnDef;

  constructor(@Optional() public table: MatTable<any>, private cdRef: ChangeDetectorRef) { }

  ngOnInit() {
    if (this.table) {
      this.cdRef.detectChanges();
      this.table.addColumnDef(this.columnDef);
    }
  }
}

但是在执行此操作之前，我们必须确保matColumnDef伪指令已经完成绑定初始化，以便它具有name。为此，我们必须在该组件上运行detectChanges。

Ng-run Example

另一种方法是按照角度材料问题中的描述在父组件中提供该名称 https://github.com/angular/material2/issues/13808#issuecomment-434417804：

parent.html

<mat-table class="mat-elevation-z8">

  <iam-select-column name="select"></iam-select-column>

SelectColumnComponent

@Input()
get name(): string { return this._name; }
set name(name: string) {
    this._name = name;
    this.columnDef.name = name;
}

角材料垫表在组件中定义可重复使用的列

1 个答案: