时间戳

首页 > 解决方案 > 物料表没有获取行标题和列动态的任何示例

angular - 物料表没有获取行标题和列动态的任何示例

问题描述

在我当前的情况下，我希望行作为标题和列将是动态值，我必须在下面的材料表中生成是示例

                  Department       Deparment1
Name              Jack             Vimal
Location          Chennai          Lucknow

但同样我能够生成带有角度的普通 html，但问题是当我在页面中执行任何操作时我无法破坏当前表。

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

请让我知道该怎么做有没有办法做到这一点严重挣扎

标签： angularangular-materialangular8angular-material2mat-table

解决方案

在典型的材料表中，您有

  1. 数据源，数据
  2. displayColumns，一个包含列名的字符串数组
  3. columnsDef，对象数组，如 {title:'header',name:'field'}

看到 displayColumns 与 columnsDef 相关

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

所以：

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

现在您更改displayedColumns 和columnsDef。那么在这个stackblitz中，我使用了一个带有所有可能列的辅助变量“columnDefAll”和一个带有 [ngModel]=displayedColumns 的多选，并使用 (ngModelChange) 来过滤列（displayedColumns 将是经过过滤的 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)
  }

推荐阅读