Angular ngx-datatable 在一列中有多个数据

Posted 2023-05-07

【中文标题】Angular ngx-datatable 在一列中有多个数据

【英文标题】：Angular ngx-datatable multiple data in one column

【发布时间】：2017-12-30 21:24:26

【问题描述】：

向 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>

谢谢！

【问题讨论】：

嘿，这里考虑这个例子：github.com/swimlane/ngx-datatable/blob/master/demo/templates/…

您正在使用 [columns]="columns" 方法，它定义了一个列对象，该示例使用模板方法，为每一列定义一个模板，您可以访问行对象和可以为所欲为。不确定您是否可以将两者混合使用，但如果可以，则值得切换。

【参考方案1】：

想通了：

更改列名 - 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] - 从模板中删除它。

【讨论】：

你能解释一下 let-value 属性吗？值如何从对象中选择？使用属性顺序还是其他什么？

但是我在这里面临的问题是列（尤其是那些你结合两个值的列）因为它们没有道具而不再可排序？我怎样才能让它们再次排序？

【参考方案2】：

如果您想坚持使用 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...
]

【参考方案3】：

以上接受的答案也对我有用，谢谢！

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

<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>

谢谢