模型中的 ngx-datatable 多列答案

【问题标题】：ngx-datatable multiple columns from model模型中的 ngx-datatable 多列
【发布时间】：2017-11-15 16:15:27
【问题描述】：

我正在寻找一种“动态”将列添加到 ngx-datatable 的方法，但我找不到方法。我想要完成的是某种日历。为简单起见，假设我有一些要在表格中显示的对象，例如：

rows: [
    { name: Joe, availableDays: [ { date:'01-01-2017', foo: true }, { date:'03-01-2017', foo: true }]} 
    { name: Jack, availableDays: [ { date:'01-04-2017', foo: true }]} 
]

现在我想查看以下列和值：

Name; 01-01-2017; 02-01-2017; 03-01-2017; 04-01-2017

Joe; true; false; true; false
Jack; false; false; false; true

忽略'foo'。我只是添加它以表明我正在寻找处理对象的东西。我很想在这个例子中使用它：https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/inline.component.ts

语法是这样的：

 <ngx-datatable-column name="Name">
      <ng-template ngx-datatable-cell-template let-value="value" let-row="row">
       [...]
      </ng-template>
 </ngx-datatable-column>

谢谢！

【问题讨论】：

您找到解决方案了吗？请分享您的见解

标签： angular ngx-datatable

【解决方案1】：

我想回答这个问题，尽管它是在一年前发布的，因为我认为它会帮助其他试图完成同样事情的人。我将 Angular6 与 Typescript 一起使用，但您仍然应该能够根据您的需求应用该解决方案。

首先，我在课堂上添加了resultColumns: any[] = []; 声明。在 HTML 方面，我添加了这一点：

<ngx-datatable class='material'
        [rows]='row'
        [columnMode]='"flex"'
        [headerHeight]='50'
        [footerHeight]='50'
        [rowHeight]='"auto"'
        [limit]='20'
        [messages]='messageObject'
        [sortType]='"single"'
        [loadingIndicator]='loading'
        [scrollbarH]="true">
    <ngx-datatable-column *ngFor="let col of resultColumns; let i = index" [name]="col.name" [flexGrow]="col.flexGrow">
        <ng-template ngx-datatable-header-template>
            {{ col.name }}
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
            {{ value }}
        </ng-template>
     </ngx-datatable-column>
</ngx-datatable>

在我的 ngOnInit 中，我调用了一个名为 generateColumns() 的函数，该函数将负责填充 resultColumns 对象。

generateColumns(rows) {
    this.rows.forEach((item) => {
        this.resultColumns.push({
            name: item.date,
            prop: item.foo,
            flexGrow: 1.0,
            minWidth: 100
        });
    }

    // Pushes the name column to the front of the column list
    this.resultColumns.unshift({
        name: 'Name',
        prop: item.name,
        flexGrow: 1.0,
        minWidth: 100
    });
}

【讨论】：

【解决方案2】：

假设你从某个地方得到你的行：

this.someService.getRows(someParam).subscribe(rows => {
  if (rows?.length > 0) {
    this.columns = Object.keys(rows[0]);
  }

  this.rows = rows;
}, (error: MysqlError) => {
  this.error = error;
}));

然后在你的模板中：

<ngx-datatable
  ...
  [rows]="rows"
>
  <ngx-datatable-column *ngFor="let col of columns" [prop]="col"></ngx-datatable-column>
</ngx-datatable>

【讨论】：