Angular 材料表 - 如何将 *ngIf 放置在整个列上？

Question

我有一个 Angular 材料表，想在整个列上放置一个 ngIf，因此整个列 header 和数据单元格仅在条件为真时显示。 我可以毫无问题地将它放在数据单元格上，但我似乎不知道如何将它放在 ng-container 或 mat-header-cell 上。

我尝试使用 ngFor，然后使用 ngIf，我尝试将 header 包装在 div 或表 header & 行中，但没有运气。

结果是 object，它具有 websiteUrl 的属性

<table mat-table matSort [dataSource]="dataSource">
    
    <ng-container matColumnDef="websiteUrl">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Website Link</th>
        <td mat-cell *matCellDef="let result">
            <div *ngIf="showWebsiteLink===1">
                <div *ngIf="websiteLinkVisible(result)">
                    <a (click)="copyLink(result.websiteUrl)">
                        Copy Link
                    </a>
                </div>
            </div>
        </td>
    </ng-container>

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

</table>

Answer 1

我为你做了一个非常简单的例子。 要删除整个 col，您需要在someCondition为 false 时使用*ngIf将其从模板中删除。 而且您还需要从displayedColumns数组中删除相同的列名。 后者更为重要。 在示例中，我删除了 col 'weight'。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
  someCondition: boolean = false;
  
  constructor() {
    if (!this.someCondition) {
      this.displayedColumns.splice(2,1);
    }
  }
}

https://stackblitz.com/edit/angular-material-table-data-source-kdttsz?file=app%2Fapp.component.ts