Angular 7 Вручную установить цвет фона для плитки - PullRequest
Новая
       8

Angular 7 Вручную установить цвет фона для плитки

3 голосов
/ 02 апреля 2019

Вот мой код: 

<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

Ответы [ 2 ]

3 голосов
/ 02 апреля 2019

Попробуйте "'red'" in [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 мы можем видеть, что он ожидает 

[style.background]="tile.color"

, который показывает, что он принимает angular переменную и интерполирует ее.Предоставляя ', вы сообщаете компоненту материала , что это строка, а не некоторая угловая переменная, определенная в component.В противном случае, с style.backgroundColor="red" он ищет переменную с именем red в компоненте.

1 голос
/ 02 апреля 2019

Вы можете просто использовать style.backgroundColor: 

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

Пример

...