*ngIf 在 mat-table ng-container 中不起作用

Question

我正在使用 Angular mat table 创建一个包含三列的简单 table。单击 table 中的任何行时，我需要在其中隐藏 2 列。所以我创建了一个点击函数，并在点击一行时将布尔变量设置为 true。

通过使用该布尔值，我将 *ngIf 条件放入 HTML 文件中，以便在单击行时隐藏列。但是 *ngIf 在 Angular 垫 table.

中不起作用

这是我的代码：

HTML

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Dessert (100g)</th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container *ngIf="rowClick" matColumnDef="calories">
    <th mat-header-cell *matHeaderCellDef>Calories</th>
    <td mat-cell *matCellDef="let element"> {{element.calories}} </td>
  </ng-container>


  <ng-container *ngIf="rowClick" matColumnDef="fat">
    <th mat-header-cell *matHeaderCellDef>Fat (g)</th>
    <td mat-cell *matCellDef="let element"> {{element.fat}} </td>
  </ng-container>
  <ng-container *ngIf="rowClick" matColumnDef="carbs">
    <th mat-header-cell *matHeaderCellDef>Carbs (g)</th>
    <td mat-cell *matCellDef="let element"> {{element.carbs}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="rowClicked()"></tr>
</table>

TS

export class sampleComponent implements OnInit {

  public rowClick: boolean =true;
  constructor() { }

  ngOnInit(): void {
    
  }

  public rowClicked() {
    this.rowClick = false;
    console.log(this.rowClick);
  }

  dataSource: Food[] = [
    {name: 'Yogurt', calories: 159, fat: 6, carbs: 24},
    {name: 'Sandwich', calories: 237, fat: 9, carbs: 37},
    {name: 'Eclairs', calories: 262, fat: 16, carbs: 24},
    {name: 'Cupcakes', calories: 305, fat: 4, carbs: 67},
    {name: 'Gingerbreads', calories: 356, fat: 16, carbs: 49},
  ];
  displayedColumns: string[] = ['name', 'calories', 'fat', 'carbs'];

}

Answer 1

您可以修改 displayedColumns 变量来控制呈现哪些列，而不是使用 *ngIf 指令。尝试以下

export class sampleComponent implements OnInit {
  ...
  displayedColumns: string[] = ['name', 'calories', 'fat', 'carbs'];

  public rowClicked() {
    this.displayedColumns = ['name'];
  }

  public reset() {
    this.displayedColumns = ['name', 'calories', 'fat', 'carbs'];
  }
}

现在不需要 rowClick 布尔标志。

*ngIf 在 mat-table ng-container 中不起作用

*ngIf is not working inside mat-table ng-container

angular

angular-material-table