Как скрыть столбец в динамической таблице материалов в Angular 6?

Question

У меня есть следующий динамический угловой материал 6 таблиц.

<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' из объекта, но мне нужно значение столбца 'Id', когда пользователь нажимает кнопку удаления [метод: deleteAnimalData(rowValue)].

Пожалуйста, предложите мне, не удаляя ключ 'ID' из объекта, как я могу скрыть столбец.

Answer 1

Только НЕ добавляйте ID к animalColumns, так как этот массив определяет ваши столбцы. См columns: animalColumns в вашем HTML