Пользовательский угловой материал 2 Заголовок таблицы DataTable по объектам - PullRequest
Новая
       1

Пользовательский угловой материал 2 Заголовок таблицы DataTable по объектам

0 голосов
/ 24 мая 2019

У меня есть обычный DataTable для Material 2, и я хочу настроить заголовок таблицы для объекта

Например: 

      <mat-form-field style="width:100%">
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>

      <div class="mat-elevation-z8">
        <table mat-table [dataSource]="dataSource" matSort>

            <ng-container matColumnDef="{{item}}" *ngFor="let item of old_title_list">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{item}} </th>
              <td mat-cell *matCellDef="let row"> {{row[item]}} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;">
            </tr>
        </table>

        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="25" showFirstLastButtons></mat-paginator>
    </div>

Он успешно отображает таблицу, однако thпросто представляет имя элемента, определенное в data_list объекте.

Так что я ожидаю, что я должен изменить код на что-то вроде ниже: 

         <ng-container matColumnDef="{{item.data}}" *ngFor="let item of new_title_list">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{item.title}} </th>
              <td mat-cell *matCellDef="let row">  {{ row[item.data] }} </td>
         </ng-container>

Я ожидаю, что он может получить значение заголовка с помощьюключ, но это не так.Что я должен делать ?

Пример данных: 

 var old_title_list = ['aaaaa', '1111', '2222', '3333'];

 var data_list: [{
   aaaaa: 'World',
   '1111': 'this is 1111',
   '2222': 'this is 2222',
   '3333': 'this is 3333',
 },{
   aaaaa: 'World', 
   '1111': 'this is 1111',
   '2222': 'this is 2222',
   '3333': 'this is 3333',
 },{
   aaaaa: 'World',
   '1111': 'this is 1111',
   '2222': 'this is 2222',
   '3333': 'this is 3333',
 }];


var new_title_list = [
    {data: 'aaaaa', title: 'Hello'},
    {data: '1111', title: '1'},
    {data: '2222', title: '2'},
    {data: '3333', title: '3'},
];

1 Ответ

1 голос
/ 24 мая 2019

Ваш предмет является объектом. Вы должны получить ключи объекта с помощью item.keys (), после того как вы сможете использовать массив ключей для отображения имени столбца. Вы можете попробовать что-то вроде этого: 

<ng-container matColumnDef="{{item.keys()[i]}}" *ngFor="let item of data_list; let i = index">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{item.keys()[i]}} </th>
              <td mat-cell *matCellDef="let row">  {{ (row[item.data] }} </td>
         </ng-container>

если вы хотите использовать заголовки из массива title_list, вы можете использовать этот код: 

<ng-container matColumnDef="{{title_list[i].title}}" *ngFor="let item of data_list; let i = index">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{title_list[i].title}} </th>
              <td mat-cell *matCellDef="let row">  {{ (row[item.data] }} </td>
         </ng-container>
...