角物料台开关案例问题

时间:2020-06-14 16:39:28

标签: html angular typescript angular-material

尝试优化我的自适应表,并用开关用例替换If语句 不幸的是,我收到错误消息,找不到带有“ col name”的列。

有什么想法吗?

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

  <div *ngFor="let column of columns; let index">

    <!-- Text -->
    <ng-container matColumnDef="{{column.key}}" *ngIf="column.type === enumTypes.text">
      <mat-header-cell *matHeaderCellDef> {{column.displayName}} </mat-header-cell>
      <mat-cell *matCellDef="let row">
        {{column.renderText ? column.renderText(row[column.key]) : row[column.key]}}
      </mat-cell>
    </ng-container>

    <!-- RadioButton -->
    <ng-container matColumnDef="{{column.key}}" *ngIf="column.type === enumTypes.radioButton">
      <mat-header-cell *matHeaderCellDef> {{column.displayName}} </mat-header-cell>
      <mat-cell *matCellDef="let row">
        <mat-radio-button style="margin-left: 20px" color="primary" [checked]="column.value === row"
        (change)="column.changeValue(row)">
          {{column.text}}
        </mat-radio-button>
      </mat-cell>
    </ng-container>

    <!-- Button -->
    <ng-container matColumnDef="{{column.key}}" *ngIf="column.type === enumTypes.buttons">
      <mat-header-cell *matHeaderCellDef> {{column.displayName}} </mat-header-cell>
      <mat-cell *matCellDef="let row">
          <button mat-raised-button color="primary" *ngFor="let button of column.buttons"
          style="margin-left: 10px" (click)="button.onClick(row)">
            {{button.name}}
          </button>
      </mat-cell>
    </ng-container>
  </div>


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

0 个答案:

没有答案
相关问题