无法将mat-grid-list和mat-list放在mat-dialog-content内

Question

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

---

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

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

如果我不提供任何自定义CSS，则我的dialog如下所示：

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

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

dialog看起来像这样（我已经检查了项目以显示它们超出了dialog，但我无法向上滚动以查看列表的顶部元素< / strong>）：

下面是我的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

希望这会有所帮助。