Блог

Главная - Вопросы по программированию - Материал Angualr для создания таблицы с динамическим столбцом и столбца с несколькими параметрами

Материал Angualr для создания таблицы с динамическим столбцом и столбца с несколькими параметрами

#angular #user-interface #angular-material #mat-table

#angular #пользовательский интерфейс #angular-material #мат-таблица

Вопрос:

Я хочу настроить динамические столбцы с несколькими параметрами в таблице столбцов для сопоставления

это мой html

 <table mat-table [dataSource]="dataT" class="mat-elevation-z8">
                <ng-container matColumnDef="{{column.name}}" *ngFor="let column of pgCol">
                    <th mat-header-cell *matHeaderCellDef> {{column.title}} </th>
                    <td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
                </ng-container>

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

это мои данные

   pgCol= [
      {
        "name": "id",
        "title": "ID",
        "show": false,
        "sort": false,
        "export": false
      },
      {
        "name": "code",
        "title": "Code",
        "show": true,
        "sort": true,
        "export": true
      },
      {
        "name": "name",
        "title": "Name",
        "show": true,
        "sort": true,
        "export": true
      }
    ]
    dataT = [{ "id": 1, "name": "firstbranch", "code": "fifif" },
  { "id": 1, "name": "firstbranch", "code": "fifif" },
  { "id": 1, "name": "firstbranch", "code": "fifif" },
  { "id": 1, "name": "firstbranch", "code": "fifif" },
  { "id": 1, "name": "firstbranch", "code": "fifif" },
  { "id": 1, "name": "firstbranch", "code": "fifif" },
  { "id": 1, "name": "firstbranch", "code": "fifif" },
  { "id": 1, "name": "firstbranch", "code": "fifif" },
  { "id": 1, "name": "firstbranch", "code": "fifif" }];

Я просто хочу, чтобы столбец с кодом данных и именем отображался в соответствии с таким свойством, как сортировка и экспорт

Ответ №1:

 Try this one

In HTML

<mat-table [dataSource]='data' matSort matSortDisableClear [matSortActive]='sortoptions.sortcol' 
 [matSortDirection]='sortoptions.sortdir' (matSortChange)='onSortChange($event)'>  
 
 In ts file
 
 sortoptions = { sortcol: 'columnname', sortdir: 'asc' };