Question

我有以下6个动态Angular材料表。

<table mat-table [dataSource]="animalDataSource" matSort *ngIf="animal && animal.length > 0">
    <ng-container *ngFor="let disCol of animalColumns;" matColumnDef="{{disCol}}">
        <th mat-header-cell *matHeaderCellDef mat-sort-header >{{disCol}}</th>
        <td mat-cell *matCellDef="let rowValue;">{{rowValue[disCol]}}
            <button *ngIf="disCol == 'Action'" mat-mini-fab class="delete-icon" (click)="deleteAnimalData(rowValue)">
            <mat-icon>delete</mat-icon>
            </button> 
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="animalColumns"></tr>
    <tr mat-row *matRowDef="let rowdata; columns: animalColumns;"></tr>
</table>

这是我的脚本：

this.animals = [];
this.animalColumns = [];
for (var i in animalList) {
    this.animal = {
        "Id": animalList[i]["_id"],
        "Animal": animalList[i].name,
        "Created By": animalList[i].createdBy,
        "Created On": new Date(animalList[i].dateOfEntry)
    }
    this.animals.push(this.animal);
}
this.animalDataSource = new MatTableDataSource(this.animals);
for (let displayColName in this.animals[0]) {
    this.animalColumns.push(displayColName);
}
this.animalColumns.push("Action");

表中有4列。而且我不需要在表中显示“ Id”列。我尝试给*ngIf和[style.display]='none'。两者都隐藏了列，列之间有全长间隙。

我本可以从对象中删除“ Id”字段，但是当用户单击“删除”按钮[方法：deleteAnimalData(rowValue)]时，我需要“ Id”列的值。

请建议我，如何从对象中删除“ ID”键，如何隐藏列。

Answer 1

请勿将ID添加到animalColumns，因为此数组定义了您的列。请参见HTML中的columns: animalColumns

Answer 2

我能够使之工作的方法是拥有一组对象（例如animalObjects），这些对象定义了构建模板的所有表列。一旦定义好它们，我就会得到另一个数组，该数组具有要显示的列名（animalColumns）。当您需要隐藏列时，可以从第二个数组（animalColumns）中删除该项目，同时保持第一个（animalObjects）不变。基本上，您必须创建具有所有列的表，然后使用修改后的animalColumn数组更新displaycolumn属性。

stackblitz example here

如何在Angular 6的动态Material表中隐藏列？

2 个答案: