Question

这是我的代码：

<mat-grid-list cols="4" rowHeight="100px">
    <mat-grid-tile colspan="2" rowspan="2">
        1
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="2">
        2
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
        3
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
        4
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="1">
        5
    </mat-grid-tile>
</mat-grid-list>

我想手动将背景色应用于这些图块。我知道我可以使用这种方法：_setStyle(property: string, value: any): void;

但是我不知道该怎么做，因为我没有在组件中初始化任何MatGridTile对象。我不想使用动态填充的网格。

https://stackblitz.com/edit/angular-adjmya?file=app/grid-list-dynamic-example.html

Answer 1

您可以只使用style.backgroundColor：

<mat-grid-tile colspan="2" rowspan="2" [style.backgroundColor]="'red'">

Example

Answer 2

在"'red'"中尝试[style.background]

<mat-grid-list cols="4" rowHeight="100px">
    <mat-grid-tile colspan="2" rowspan="2" [style.background]="'red'">
        1
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="2">
        2
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
        3
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
        4
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="1">
        5
    </mat-grid-tile>
</mat-grid-list>

Demo code here

更新：

之所以需要用'单引号引起来，是因为根据demo，我们可以看到它是期望的

[style.background]="tile.color"

表明它接受angular变量并进行插值。通过提供'，您可以告诉材料组件它是一个字符串，而不是component中定义的一些角度变量。否则，将使用style.backgroundColor="red"在组件中查找名为red的变量。

Answer 3

这将起作用

 <mat-grid-tile [colspan]="3" [rowspan]="1" style="background-color: lightblue">

Angular 7手动将背景色设置为平铺

3 个答案:

更新：