Angular ngx-datatable несколько данных в одном столбце

У меня небольшая проблема с добавлением более одной опоры в столбец в 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» и «когда» в одном столбце.

Модель:

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>

Спасибо!


javascript angular datatables ngx-datatable angular-datatables
person Alik Chebotar    schedule 25.07.2017    source источник
comment
Эй, рассмотрим этот пример здесь: github .com / swimlane / ngx-datatable / blob / master / demo / templates /.   -  person Amit    schedule 25.07.2017
comment
Вы используете метод [columns] = columns, который определяет объект columns, в этом примере используется шаблонный метод, вы определяете шаблон для каждого столбца, вы получаете доступ к объекту row и можете делать все, что захотите. Не уверен, что вы можете смешать два, но стоит переключиться, если он работает.   -  person Amit    schedule 25.07.2017

Ответы (3)


arrow_upward
29
arrow_downward

Догадаться:

Чтобы изменить имена столбцов - let-column
Форматирование содержимого ячейки (например: Дата) - let-значение
Форматирование с несколькими свойствами Пример: Дата - давай-ка

Шаблон:

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

[столбцы] больше не нужны - удалите его из шаблона.

person Alik Chebotar    schedule 26.07.2017
comment
Не могли бы вы объяснить свойство let-value. Как значение выбирается из объекта? используя порядок собственности или что-то еще? - person sajith; 17.12.2018
comment
и как на этом будет работать сортировка? - person Reza; 09.01.2021

arrow_upward
1
arrow_downward

Если вы хотите придерживаться использования входов 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...
]
person Bogdan D    schedule 11.04.2020

arrow_upward
0
arrow_downward

Вышеупомянутый принятый ответ тоже сработал для меня, спасибо!

Иногда, если кто-то ищет несколько свойств в одном столбце и где одновременно должно отображаться только одно значение, может использовать следующие

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

Спасибо

person mramsath    schedule 24.03.2021