[英]Angular ngx-datatable multiple data in one column
我在向 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”。
型號:
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] - 從模板中刪除它。
如果您想堅持使用columns
和rows
輸入,您可以將聚合列添加到行本身。 如果沒有突變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...
]
以上接受的答案也對我有用,謝謝!
有時,如果有人要在一列中查找多個屬性並且一次只應顯示一個值,則可以使用以下命令
<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>
謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.