Angular ngx-datatable 一列中的多个数据 [英] Angular ngx-datatable multiple data in one column
本文介绍了Angular ngx-datatable 一列中的多个数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在向 ngx-datatable 中的列添加多个道具时遇到了一个小问题:
I've got a little problem adding more then one prop to column in 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"和when".
I need to display two props in one column. Like 'eventName' and 'when' in one column.
模型:
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>
谢谢!
推荐答案
想通了:
更改列名称 - let-column
格式化单元格内容(例如:日期) - let-value
具有多个属性的格式例如:日期 - 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] - 从模板中删除它.
No need for [columns] anymore - remove it from the template.
这篇关于Angular ngx-datatable 一列中的多个数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文