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

Question

我在代码中显示 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 中，我想在两列中显示数据。两列中的一列宽度为 150 像素，用户希望在单击按钮时显示或隐藏此列（目前正在运行）。

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

1) 我不希望该列在隐藏时展开

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

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

最好的设计是什么？

Answer 1

您需要使用 css 属性可见性来隐藏状态。与 *ngIf 或 Css display: none 不同，Both 属性从 Dom 中删除元素，并且这些元素的空间在 html 上将是空闲的。所以使用可见性。这只是隐藏元素，但 Dom 是不可更改的。

visibility: visible to visibility: hidden;