对 ngx-datatable 列使用角度组件答案

【问题标题】：Use angular component for ngx-datatable column对 ngx-datatable 列使用角度组件
【发布时间】：2020-08-02 21:26:08
【问题描述】：

我在我的应用程序中经常使用 ngx-datatable，我希望为列及其各自的标题提供一些通用模板。

现在我有

<ngx-datatable #myTable
        XXX>
   <ngx-datatable-column
       name="selection">
       <ng-template let-column="column" ngx-datatable-header-template>
           <app-component-header-table></app-component-header-table>
       </ng-template>
       <ng-template let-row="row" ngx-datatable-cell-template>
           <app-component-content-table></app-component-header-table>
       </ng-template>
  </ngx-datatable-column>
.... rest of the table ...
</ngx-datatable>

我想要实现的是在单个文件/组件中包含包含内容的组件和包含标题的组件

并且或多或少地使用它：

<ngx-datatable #myTable
        XXX>
   <ngx-datatable-column
       name="selection">
       <app-custom-column></app-custom-column>
  </ngx-datatable-column>
.... rest of the table ...
</ngx-datatable>

显然可以访问里面的对象列和行

【问题讨论】：

标签： angular typescript components ngx-datatable

【解决方案1】：

大量时间浪费在寻找更好的方法以避免在 ngx-datatable 中复制过去。有我的解决方案：

创建新的组件处理程序，我称它们为“custom-table”。
为此组件提供行和列@inputs
监听更改 cols 并重写 columns 属性。
用您的自定义表格单元格声明 ViewChild。

custom-table.ts

export class CustomTableComponent implements OnInit, OnChanges {
  columns = [];

  @ViewChild('table', { static: false }) table: any;
  @ViewChild('primary', { static: true }) primary: TemplateRef<any>;
  @ViewChild('withAvatar', { static: true }) withAvatar: TemplateRef<any>;

  @Input() rows: Array<any>;
  @Input() cols: Array<Object>;

  public selected: TableColumnModelExtended[] = [];

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.hasOwnProperty('cols') && changes.cols.currentValue) {
      this.updateCols();
    }
  }

  ngOnInit() {
    if (this.cols) {
      this.updateCols();
    }
  }

  updateCols(): void {
    this.columns = this.cols.map((col: TableColumnModelExtended) => ({
      ...col,
      cellTemplate: this[col.cellTemplate],
      headerTemplate: this[col.headerTemplate],
    }));
  }
}

custom-table.html

<div class="custom-table">
  <ngx-datatable
    #table
    columnMode="force"
    [rows]="rows"
    [columns]="columns">
  </ngx-datatable>

  <!--COLUMN WITH AVATAR-->
  <ng-template #withAvatar let-value="value" let-row="row">
    <column-with-avatar [value]="value"></column-with-avatar>
  </ng-template>


  <!--PRIMARY COLUMN-->
  <ng-template #primary let-value="value" let-row="row" let-column="column">
    <column-primary [value]="value" [column]="column"></column-primary>
  </ng-template>

</div>

之后就可以这样使用了。

示例组件.ts

export class ExampleComponent {
  public columns: TableColumnModel[] = ExampleListColumns;
  readonly valueList$: BehaviorSubject<DeliveryNote[]> = new BehaviorSubject([]);

}

example-component.html

<custom-table
  [rows]="valueList$ | async"
  [cols]="columns">
</custom-table>

example-component-table.config.ts

export const ExampleListColumns: TableColumnModelExtended[] = [
  {
    cellTemplate: 'primary',
    name: 'Quantity',
    prop: 'quantity',
    cellClass: 'right',
  },
  {
    cellTemplate: 'withAvatar',
    name: 'Avatar',
    prop: 'userAvatar',
  }
];

在定义列配置时要小心。您应该不在数组末尾使用额外的 ','。

最后得到一个表格，使用配置来展示组件，并且不会一遍遍重复html代码。

要添加一个新列类型，你只需要在组件内描述一次并在组件内创建一个@ViewChild。

【讨论】：