在Angular Material的mat-grid-list中动态更改列值

Question

我正在使用mat-grid-list：https://material.angular.io/components/grid-list/examples 在文档中给出了以下内容（您可以参考下面的链接）：

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

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

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

是否有任何解决方案或实现此目标的替代方法？ 请参考以下图片：https://istack.dev59.com/AhsrY.webp

- ian dsouza

---

如果您想让我用代码创建与您提供的图片类似的网格，请告诉我。 - L. Guthardt

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>

有一种方法是通过使用列表，例如您在typescript类中拥有的tiles并动态设置值。

---

或者您可以手动在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>

- L. Guthardt

---

我们如何动态更改内容？比如说我想要添加一个子组件到内容中，这是可能的吗？ - Sherwin Ablaña Dapito

@SherwinAblañaDapito 确定这就是 Angular 的概念。只需创建任何子组件并将其“选择器”插入到“mat-grid-tile”的内容中即可。 - L. Guthardt

Answer 2

你可以尝试这个： 使用动态行和列的Angular2表格 或者通过使用多个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>

- Prachi

---

请您再次检查问题，我已经更新了一张图片。从您的回答中能够实现吗？谢谢。 - ian dsouza

实际上，我想为每个mat-grid-tile更改cols值，这样我就可以设置[colspan]值，然后获得所需的输出。但问题是我无法更改每个mat-grid-tile的值。我只能一次设置“cols”值。 - ian dsouza

我建议使用具有给定列的表结构，并动态分配colspan和rowspan值。尝试使用基本的HTML静态创建它，然后将其转换为动态的Angular代码。 - Prachi