Angular ngx-datatable multiple data in one column

问题

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!

回答1:

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

标签

javascript

angular

datatables

angular-datatables

ngx-datatable