动态更改角度材料 mat-grid-list 中的列值

Question

我正在使用 mat-grid-list ：https : //material.angular.io/components/grid-list/examples

所以在文档中给出了（你可以参考下面的链接）：

添加跨越多行或多列的图块 可以使用 rowspan 和 colspan 属性分别设置每个 mat-grid-tile 的 rowspan 和 colspan。如果未设置，则它们都默认为 1。 colspan 不得超过 mat-grid-list 中的 cols 数。然而，对 rowspan 没有这样的限制，只会为它添加更多的行来填充瓷砖。

但我的问题是我想要这样的结构：

将有三行，第一行 3 列，第二行 4 列和第三行 2 列。就像一个拼贴画框。每行的列数将动态发送。

有没有解决方案或替代方法来实现这一目标？参考此图片：https : //i.stack.imgur.com/AhsrY.png

Answer 1

是的，您可以为每个磁贴动态更改列和行。

<mat-grid-list cols="{{desired_columns}}" rowHeight="{{desired_rowHeight}}">
    <mat-grid-tile
        *ngFor="let tile of tiles"
        [colspan]="tile.cols"
        [rowspan]="tile.rows"
        [style.background]="tile.color">
       {{tile.text}}
    </mat-grid-tile>
</mat-grid-list>

这是使用列表的一种方法，例如tiles您在typescript类中拥有并动态设置值。

或者您可以mat-grid-tile在 html 中创建您的手册，但仍然为每个tile.

<mat-grid-tile [colspan]=1 [rowspan]=2>
    content
</mat-grid-tile>
<mat-grid-tile [colspan]=4 [rowspan]=1>
    content
</mat-grid-tile>
<mat-grid-tile [colspan]=3 [rowspan]=2>
    content
</mat-grid-tile>