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

Question

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

上

我尝试使用 ngFor 然后使用 ngIf，我尝试将 header 包装在 div 或 table 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

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

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

Angular Material Table - how to place *ngIf on whole column?

html

html-table

angular-material

angular