角柱可见性答案

【问题标题】：Angular Column Visibility角柱可见性
【发布时间】：2021-08-03 08:34:29
【问题描述】：

在我的代码中，我有一个表，其中包含我需要其值的几列。我不希望用户看到这些列。我怎样才能使它们不可见？ PS。我试过Visible = false，但我仍然能够看到整个专栏。

    <ng-container matColumnDef="ProductCategory">
        <th mat-header-cell *matHeaderCellDef> Kategori</th>
        <td mat-cell *matCellDef="let row; let i = index">
            <span *ngIf="EditIndex != i">{{row.ProductCategory?.CategoryName}}</span>
            <mat-form-field *ngIf="EditIndex == i" class="w-100-p" >
                <mat-select required name="ProductCategory" [(ngModel)]="row.ProductCategory"
                    (selectionChange)="productCategoryChange(row, $event.value.ProductCategoryId, i)">
                    <mat-option *ngFor="let prm of productCategories" [value]="prm" >
                        {{prm.CategoryName}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </td>
    </ng-container>

【问题讨论】：

这能回答你的问题吗？ angular2 material table hide column

标签： javascript html angular typescript

【解决方案1】：

Angular Material 已经提供了该功能。您可以在表格中添加这一行：

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

displayedColumns 是一个字符串数组，其中包含可见列的 matColumnDef 字符串。只有在数组中定义的列才可见。如果您想显示示例中的列，则数组将如下所示：

["ProductCategory"]

有关更多信息，请查看文档：https://material.angular.io/components/table/api

【讨论】：