css - 在Angular Material 垫对话框中隐藏/显示列

我正在显示mat-dialog，如代码所示

我给定了高度和宽度的静态值（不确定是否可以在显示Mat-dialog后更改）

 const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = false;
dialogConfig.height = '700px';
dialogConfig.width = '700px';
this.dialog.open(etailsComponent, dialogConfig);

因此，在Mat-dialog中，我想在两列中显示数据。两列之一的宽度为150px，用户希望在单击按钮时显示或隐藏此列（目前正在运行）。

当我隐藏该列时，另一列将展开以覆盖150px的空间。

1）我不希望将列扩展为隐藏

2）隐藏列后，我不想显示空白区域。（我认为这很棘手）

我正在使用Flex容器来扩展列。

最好的设计是什么？

最佳答案

您需要使用CSS属性可见性来隐藏状态。而不是* ngIf或Css display：none，Both属性均从Dom中删除元素，并且这些元素的空间在html上是可用的。因此，使用可见性。这只是隐藏元素，但Dom不可更改。

visibility: visible to visibility: hidden;