无法在 mat-dialog-content 中放置 mat-grid-list 和 mat-list

Question

更新： stackbliz https://angular-2wqf4b.stackblitz.io

---

我正在构建一个比较屏幕，我们可以在其中比较两个项目。我试图在mat-grid-list 内将这两个项目显示为两个mat-cards。这两个项目还有一个要比较的属性列表，我试图使用*ngFor 将其放入mat-list 中。

我的问题是dialog 没有显示我的数据的全尺寸。如果我放置静态内容，例如任何标签内的一些文本，例如<p> dialog 会自动调整并变为全尺寸，如官方网站here 所示。

如果我不给任何自定义CSS 我的dialog 看起来像这样：

如果我将自定义CSS 放在下面（我尝试将这个CSS 放在不同的元素上，但无法获得令人满意的结果）：

mat-grid-list {
   min-height: 80vh;
   width: 88vw;
}

dialog 看起来像这样（我检查了这些项目以表明它们超出了 dialog 并且我无法向上滚动以查看列表的顶部元素） ：

以下是我的dialog 的 HTML。我准备好更改对话框的内部元素，只要它们在dialog 中显示得很好。

<h2 mat-dialog-title>Compare</h2>
<mat-dialog-content class="mat-typography"> 
    <mat-grid-list  cols="2">
        <mat-grid-tile>
            <mat-card class="example-card">
              <mat-card-header>
                <img mat-card-avatar [src]="item.image" alt="item.name">
                <mat-card-title>{{item.name}}</mat-card-title>
                <mat-card-subtitle>display discription</mat-card-subtitle>
              </mat-card-header>
              <mat-card-content>
               <mat-list>
                  <h3 mat-subheader>Amenities</h3>
                  <mat-list-item *ngFor="let attribute of item.attributes">
                    <mat-icon mat-list-icon>folder</mat-icon>
                    <h4 mat-line>{{attribute.name}}</h4>
                  </mat-list-item>
                  <mat-divider></mat-divider>
                  <h3 mat-subheader>Activities</h3>
                  <mat-list-item *ngFor="let activity of item.activities">
                    <mat-icon mat-list-icon>note</mat-icon>
                    <h4 mat-line>{{activity.name}}</h4>
                  </mat-list-item>
                </mat-list>
              </mat-card-content>
            </mat-card>
        </mat-grid-tile>
        <mat-grid-tile>
            <mat-card class="example-card">
              <mat-card-header>
                <!-- <img mat-card-avatar [src]="item.image" alt="itmem.name"> -->
                <mat-card-title>{{item.name}}</mat-card-title>
                <mat-card-subtitle>display discription</mat-card-subtitle>
              </mat-card-header>
              <mat-card-content>
              </mat-card-content>
            </mat-card>
        </mat-grid-tile> 
    </mat-grid-list> 
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

Answer 1

要全屏显示对话框，您需要设置对话框的高度和宽度，如下所示。

const dialogRef = this.dialog.open(DialogContentExampleDialog, {
      width: '120%',
      height: '100%'
    });

为了并排显示 div，

<mat-grid-list cols="2" rowHeight="1:2">

这里是演示 - https://angular-2wqf4b-hasjzk.stackblitz.io/

代码 - https://stackblitz.com/edit/angular-2wqf4b-hasjzk

希望这会有所帮助。