angular - Angular Material - mat-grid-list : 根据瓦片内容设置 mat-grid-tile 高度

Question

尝试创建一个 mat-grid-list，其中包含具有不同长度的动态内容的图块。但是，当尝试使用 rowspan 属性动态设置高度时，无法正确生成内容

    <mat-grid-list [cols]="columnNum" rowHeight="225px">
    <mat-grid-tile *ngFor="let number of [0,1,2,3,4,0,1,2,3,4,0,1,2,3,4]"
        [rowspan]="CardContainer.offsetHeight>225?CardContainer.offsetHeight/225:1">
        <div #CardContainer>
            <mat-card>
                <mat-card-header>
                    <!-- <img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba2.jpg"
                    alt="Photo of a Shiba Inu"> -->
                    <mat-card-title>
                        Shiba Inu {{CardContainer.offsetHeight}}
                    </mat-card-title>
                    <span class="titlebar-spacer"></span>
                    <!-- <mat-card-actions> -->
                    <button mat-icon-button>
                        <mat-icon>open_in_new</mat-icon>
                    </button>
                    <!-- </mat-card-actions> -->
                </mat-card-header>
                <mat-card-content>
                    <p>
                        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from
                        Japan.
                        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
                        originally
                        bred for hunting.
                    </p>
                    <p *ngIf="number==3">
                        agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
                        bred for hunting.
                    </p>
                    <p *ngIf="number==3|| number==4">
                        agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
                        bred for hunting.
                    </p>
                </mat-card-content>
            </mat-card>
        </div>
    </mat-grid-tile>
</mat-grid-list>

标签： angularangular-materialangular-material2angular-ui