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

Posted 2023-03-13

【中文标题】在 Angular 材质垫对话框中隐藏/显示列

【英文标题】：Hide/Show column in Angular material mat-dialog

【发布时间】：2020-02-22 20:44:48

【问题描述】：

我在代码中显示 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 容器来扩展列。

最好的设计是什么？

【问题讨论】：

列因它们具有的内部 CSS 样式而延伸。它与对话框本身无关。要更新对话框大小，您可以使用updateSize - this.dialogRef.updateSize('700px', '350px')

【参考方案1】：

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

visibility: visible to visibility: hidden; 

【讨论】：

这也是一样的，我没有看到任何变化