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

Question

我正在尝试在我的 md 表中使用 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" 指令时，出现错误:错误错误: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">