Angular ngx-datatable一列中的多个数据

时间:2017-07-25 06:01:30

标签: javascript angular datatables angular-datatables ngx-datatable

我在ngx-datatable中为列添加多个支柱时遇到了一些问题:

columns = [
  { prop: 'semesterName', name: 'סמסטר', resizeable: false },
  { prop: 'eventName', name: 'מפגש', resizeable: false },
  { prop: 'when', name: 'מועד מפגש', resizeable: false },
  { prop: 'lecturerName', name: 'מרצה', resizeable: false },
  { prop: 'hugName', name: 'חוג', resizeable: false },
];

我需要在一列中显示两个道具。喜欢' eventName'和'当'在一栏中。

模特:

export class Course {
  semester: string;
  semesterName: string;
  courseObject: string;
  course: string;
  courseName: string;
  eventObject: string;
  event: string;
  eventName: string;
  hugName: string;
  dayOfWeek: string;
  dayOfWeekNum: string;
  where: string;
  when: string;
  lecturerName: string;
  lecturerEMail: string;
  authMembers: number;
  eventStatus: string;}

Html:

<ngx-datatable[columns]="columns" [rows]="courses">
</ngx-datatable>

谢谢!

3 个答案:

答案 0 :(得分:21)

想出来:

更改列名称 - let-column
格式化单元格内容(例如:日期) - let-value
使用多个属性格式化Ex:日期 - let-row

模板:

<ngx-datatable [rows]="courses">
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                סמסטר
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.semesterName}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                מפגש
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.event}} <br> {{row.eventName}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                מועד מפגש
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.where}} <br> {{row.when}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                מרצה
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                <a href="mailto:{{row.lecturerEmail}}">{{row.lecturerName}}</a>
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                חוג
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.hugName}}
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>

不再需要 [columns] - 将其从模板中删除。

答案 1 :(得分:0)

如果要坚持使用columnsrows输入,可以将汇总列添加到行本身。 如果不更改courses,属性将如下所示:

const rows = courses.map(course => ({
  ...course,
  eventDetails: `${course.eventName} on ${course.when}`
}))

const columns = [
  { prop: 'eventDetails', name: 'Event', resizable: false },
  // the rest of your columns...
]

答案 2 :(得分:0)

以上接受的答案也适用于我,谢谢!

有时,如果有人要在一列中查找多个属性并且一次只应显示一个值,则可以使用以下内容

<ngx-datatable-column name="Test">
  <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
    {{ row.propert1 || row.propert2 }}
  </ng-template>
</ngx-datatable-column>

谢谢