我有一個 Angular 材料表，想在整個列上放置一個 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>
uj5u.com熱心網友回復：
我為你做了一個非常簡單的例子。要洗掉整個 col，您需要在為 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/app.component.ts
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/420573.html
標籤：
上一篇：MatTable獲取每行的多個值