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 },
];
I need to display two props in one column. Like 'eventName' and 'when' in one column.
The model:
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;}
The Html:
<ngx-datatable[columns]="columns" [rows]="courses">
</ngx-datatable>
Thank you!
Figured it out:
To change column names - let-column
Formatting cell content (ex: Date) - let-value
Formatting with multiple properties Ex: Date - let-row
The template:
<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>
No need for [columns] anymore - remove it from the template.
来源:https://stackoverflow.com/questions/45295031/angular-ngx-datatable-multiple-data-in-one-column