Angular Material Table - 如何将 *ngIf 放置在整个列上？

Question

我有一个 Angular Material 表，想在整个列上放置一个 ngIf，这样整个列、标题和数据单元格仅在条件为真时显示。我可以将它放在数据单元上，没有什么问题，但我似乎无法解决如何将它放在 ng-container 或 mat-h​​eader-cell 上。

我尝试过使用 ngFor 然后使用 ngIf，我尝试将标题包装在 div 或表标题和行中，但没有成功。

result 是对象，它有一个属性 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

我为你做了一个非常简单的例子。要删除整个列，您需要在为 false*ngIf时将其从模板中删除。someCondition而且您还需要从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