角材料垫表在组件中定义可重复使用的列 [英] Angular Material mat-table define reusable column in component

问题描述

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

Anybody know if it is possible to create a "column" component for use with mat-table, I have tried creating a component for a commonly used column definition but when adding to the table i get an error that was unable to find the column selector, my column definition is below:

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

and the displayedColumns are:

  displayedColumns = [
    'select'
  ];

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

Is it possible to do this as I would like to avoid the duplication in tables where I have a select column?

推荐答案

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

In order to make it work you have to add that columnDef manually to table by using table.addColumnDef method.

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

But before doing this we have to make sure that matColumnDef directive has already finished bindings initialization so that it has name. For that we have to run detectChanges on that component.

Ng运行示例

Ng-run Example

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

Another way is to provide that name in parent component as it described in angular material issue 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;
}

这篇关于角材料垫表在组件中定义可重复使用的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！