angular - 无法将 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，并且我无法向上滚动以查看列表的顶部元素):

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

希望这有帮助。