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没有这样的限制，只需添加更多行就可以填充tile。

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

将有三行，第一行有3列，第2行4列和第3行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-tile手册，但仍然为每个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>

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

2 个答案: