时间戳

首页 > 解决方案 > 动态更改角度材料 mat-grid-list 中的列值

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

问题描述

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

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

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

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

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

是否有任何解决方案或替代方法可以实现这一目标？参考这张图片：https ://i.stack.imgur.com/AhsrY.png

标签： angulartypescriptflexboxgridangular-material

解决方案

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

<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>

推荐阅读