隱藏/顯示 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;