在Angular材质垫对话框中隐藏/显示列

Question

我正在显示代码中显示的mat-dialog

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

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

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

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

1）我不希望在隐藏时扩展列

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

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

最好的设计是什么？

Answer 1

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

visibility: visible to visibility: hidden;