隐藏/显示 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 属性可见性来隐藏 state。 而不是 *ngIf 或 Css 显示：无，这两个属性都从 Dom 中删除元素，并且这些元素的空间将在 html 上释放。 所以使用可见性。 这只是隐藏元素，但 Dom 是不可更改的。

visibility: visible to visibility: hidden;