angularjs – ngx-datatable来自模型的多个列

发布时间：2020-12-17 10:24:26 所属栏目：安全来源：网络整理

导读：我正在寻找一种方法将列添加到ngx-datatable“动态”但我无法找到方法.我想要完成的是某种日历.为了简单起见,我想说我想在表格中显示一些对象,例如： rows: [ { name: Joe,availableDays: [ { date:'01-01-2017',foo: true },{ date:'03-01-2017',foo: true

我正在寻找一种方法将列添加到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>

谢谢！

我想回答这个问题,即使它是在一年前发布的,因为我认为它会帮助那些试图完成同样事情的人.我正在使用带有Typescript的Angular6,但您仍然可以将解决方案应用于您的需求.

首先我添加了一个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,minWidth: 100
    });
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!