动态更改角度材料 mat-grid-list 中的列值 [英] Dynamically change column values in angular material mat-grid-list

问题描述

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

I am using mat-grid-list :https://material.angular.io/components/grid-list/examples

所以在文档中给出了它(你可以参考下面的链接):

So in the documentation it is given (you can refer the link below) :

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

Adding tiles that span multiple rows or columns It is possible to set the rowspan and colspan of each mat-grid-tile individually, using the rowspan and colspan properties. If not set, they both default to 1. The colspan must not exceed the number of cols in the mat-grid-list. There is no such restriction on the rowspan however, more rows will simply be added for it the tile to fill.

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

But my Issue is that I want a structure like this :

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

there will be three rows and in the first row 3 columns, 2nd Row 4 columns and 3rd row 2 columns. Like a collage frame. the number of columns per row will be send dynamically.

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

Is there any solution or an alternative way of achieving this? refer this Image : https://i.stack.imgur.com/AhsrY.png

推荐答案

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

Yes you can change the columns and rows dynamic for every tile.

<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 类中设置的值是动态的.

That's one way by using a list e.g. tiles that you have in your typescript class and set the values dynamic.

或者您可以在 html 中创建您的 mat-grid-tile 手册，但仍然为每个 tile 设置不同的列和行跨度.

Or you can create your mat-grid-tiles manual in html, but still set different column and row spans for each 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>

这篇关于动态更改角度材料 mat-grid-list 中的列值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！