Angular 7 手动设置平铺背景颜色

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

在[style.background]

中尝试"'red'"

<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 变量并对其进行插值。通过提供 ' ，您告诉 material 组件 它是一个字符串，而不是 component 中定义的某个 angular 变量。否则，对于 style.backgroundColor="red" ，它会在组件中查找名为 red 的变量。

Answer 3

这会起作用

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

Angular 7 手动设置平铺背景颜色

Angular 7 Manually set background color to tile

html

angular

angular-material2

更新：