html - 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>

我想为这些图 block 手动应用背景颜色。 我知道我可以使用这个方法:_setStyle(property: string, value: any): void;

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

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

Answer 1

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