Таблица материалов не получает никакого примера для динамического заголовка строки и столбца

В моем текущем сценарии, где я хочу, чтобы строка в качестве заголовка и столбца были динамическими значениями, которые я должен указать в таблице материалов ниже, является примером

                  Department       Deparment1
Name              Jack             Vimal
Location          Chennai          Lucknow

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

Обычная таблица HTML

     <table>
        <th *ngFor="let column of columnsToDisplay; let i=index" (click)="assumptionModel(i)">{{column}}</th>
        <tr>
          <td *ngFor="let dat of trialMilestones">{{dat.name}}</td>
        </tr>
        <tr>
          <td *ngFor="let dat of trialMilestones">{{dat.location}}</td>
        </tr>
    </table>

Пожалуйста, дайте мне знать, как это сделать, есть ли какой-либо способ сделать это серьезно


angular angular8 angular-material angular-material2 mat-table
person Mr.M    schedule 21.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В типичной таблице материалов у вас есть

  1. dataSource, данные
  2. displayColumns, массив строк с именами столбцов
  3. columnsDef, массив объектов типа {title: 'header', name: 'field'}

Обратите внимание, что displayColumns связаны с columnsDef

displayedColumns=columsDef.map(x=>x.name)

So:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of columnsDef" [matColumnDef]="column.name">
        <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="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Теперь вы меняете displayColumns и columnsDef. Хорошо в этот stackblitz Я использую вспомогательную переменную columnDefAll со всеми возможными столбцами и множественный выбор с [ngModel] = displayColumns и использую (ngModelChange) для фильтрации столбцов (displayColumns будет отфильтрованным dolumnsDefAll). но вы можете сделать в любом другом способ

<mat-form-field>
    <mat-label>Columns</mat-label>
    <mat-select multiple [ngModel]="displayedColumns"
              (ngModelChange)="displayedColumns=$event;changeColumns($event)" >
        <mat-option *ngFor="let col of columnsDefAll" [value]="col.name">
            {{col.title}}
        </mat-option>
    </mat-select>
</mat-form-field>

  changeColumns(columns)
  {
    this.columnsDef=this.columnsDefAll.filter(x=>columns.indexOf(x.name)>=0)
  }
person Eliseo    schedule 21.02.2020
comment
спасибо за ответ, но я думаю, что вы не поняли проблему, мне не нужен какой-либо фильтр, который я хочу вместо заголовка столбца, мне нужен заголовок строки - person Mr.M; 21.02.2020
comment
:: glups :: извините, см. stackoverflow.com/questions/57650401/ - person Eliseo; 21.02.2020
comment
снова здесь столбец есть, но как получить статическую строку в левой части, как в моем примере - person Mr.M; 21.02.2020