Question

我试图在我的md-table中使用ng-if但是我收到了错误：

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *

这是我的模板代码

<md-row *cdkRowDef="let row;  columns: displayedColumns" (click)="viewNarrative(row)">
  <md-cell *cdkCellDef="let row" *ngIf="!(authService.isAdmin())">
    <button md-button (click)="viewNarrative(row)"><md-icon>toc</md-icon> Narrative</button>
    <button md-button (click)="editDemographics(row)"><md-icon>edit</md-icon> Demographics</button>
    <button md-button (click)="confirmDelete(row, $event)" style="line-height:normal"><md-icon>delete</md-icon> Delete</button>
  </md-cell>
</md-row>

当我删除*cdkCellDef="let row"指令时，我收到错误：ERROR Error: No provider for CdkColumnDef! 那么如何实现ng-if指令？

Answer 1

问题是你在一个元素上使用了两个带有星号语法的结构指令。你需要打开其中一个。以下应该有效：

  <ng-template [ngIf]="!(authService.isAdmin())">
      <md-cell *cdkCellDef="let row">
        <button md-button (click)="viewNarrative(row)"><md-icon>toc</md-icon> Narrative</button>
        <button md-button (click)="editDemographics(row)"><md-icon>edit</md-icon> Demographics</button>
        <button md-button (click)="confirmDelete(row, $event)" style="line-height:normal"><md-icon>delete</md-icon> Delete</button>
      </md-cell>
  </ng-template>

或者只需将ngIf移至ng-container：

即可

<ng-container *ngIf="!(authService.isAdmin())">
    <md-cell *cdkCellDef="let row">

Answer 2

您可以在md-cell外部应用* ng，就像这样。

<md-row *cdkRowDef="let row;  columns: displayedColumns" (click)="viewNarrative(row)">
  <md-cell *cdkCellDef="let row">
    <button md-button (click)="viewNarrative(row)"  *ngIf="!(authService.isAdmin())"><md-icon>toc</md-icon> Narrative</button>
    <button md-button (click)="editDemographics(row)" *ngIf="!(authService.isAdmin())"><md-icon>edit</md-icon> Demographics</button>
  </md-cell>
</md-row>

Answer 3

你可以这样做：

这使您可以使用mat-cell和* ngIf

<ng-container matColumnDef="isActive">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Active </mat-header-cell>
  <mat-cell *matCellDef="let element"> <mat-icon *ngIf="element.isActive;else notactive;">done</mat-icon>
    <ng-template #notactive><mat-icon>clear</mat-icon></ng-template>
  </mat-cell>
</ng-container>

在md-table中实现ng-if指令

3 个答案: