动态更改角度材料 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 数。但是，对于行跨度没有这样的限制，将简单地添加更多行以供其填充。

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

将有三行，第一行 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 类中，并将值设置为动态。

---

或者您可以在 html 中创建您的 mat-grid-tiles 手册，但仍为每个 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>

Answer 2

你可以试试这个： angular2 table with dynamic rows and columns 或通过为不同的行提供不同的行高比和列来使用多个 mat-grid-list ：

<mat-grid-list cols="{{your_desired_columns}}" rowHeight="{{your_dynamic_ratio}]">
    <mat-grid-tile>1</mat-grid-tile>
    <mat-grid-tile>2</mat-grid-tile>
    <mat-grid-tile>3</mat-grid-tile>
   ..
    <mat-grid-tile>n</mat-grid-tile>
</mat-grid-list>