动态更改角度材料的网格列表中的列值 [英] 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数量.对于行跨度没有这种限制,但是,只需为其填充图块即可添加更多行.
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>
这是使用列表的一种方法,例如typescript
类中的tiles
,并将值设置为动态.
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-tile
s 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>
这篇关于动态更改角度材料的网格列表中的列值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!