Матрица углового материала определяет многоразовый столбец в компоненте

Question

Кто-нибудь знает, возможно ли создать компонент «столбец» для использования с mat-таблицей, я пытался создать компонент для часто используемого определения столбца, но при добавлении в таблицу я получаю ошибку, которую не удалось найти выбор столбца, мое определение столбца ниже:

@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>

и отображаемые столбцы:

  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. Для этого мы должны запустить deteChanges для этого компонента.

Ng-run Пример

Другим способом является предоставление этого имени в родительском компоненте, как это описано в угловом выпуске материала. 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;
}