3
votes

Angulaire 7 Définir manuellement la couleur d'arrière-plan de la mosaïque

Voici mon code:

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

Je souhaite appliquer manuellement une couleur d'arrière-plan à ces carreaux. Je sais que je peux utiliser cette méthode: _setStyle (property: string, value: any): void;

Mais je n'ai aucune idée de comment dans mon cas, puisque je ne l'ai pas fait ' t initialiser tout objet MatGridTile dans mon composant. Je ne veux pas utiliser une grille remplie dynamiquement.

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

angular html angular-material2

7 commentaires

Essayez d'utiliser :: ng-deep . pouvez-vous fournir un code de démonstration afin que nous puissions vous fournir une solution

@ShashankVivek c'est trop complexe pour fournir une démo angulaire (ou je n'ai jamais trouvé de moyen facile de le faire) désolé ....

Pouvez-vous modifier stackblitz.com/angular/… et nous montrer?

Oh mec j'ai oublié ça (et je l'utilise lol), bien sûr que je peux

Comment puis-je sauver cette fichue chose? @ShashankVivek

Cliquez d'abord sur "fourchette" puis enregistrez: D

Oui merci, je l'ai ajouté à ma question :)

3 Réponses :

2
votes

Vous pouvez simplement utiliser style.backgroundColor:

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

Exemple

4 commentaires

Merci mais ça ne marche pas, j'ai déjà essayé ça. De plus, mon IDE me dit que je ne peux pas utiliser cette propriété ici de toute façon, donc je suppose que c'est vrai ...

dans le fichier css du composant de l'application: mat-grid-tile {background-color: yellow; }

merci mais comment puis-je sélectionner une tuile spécifique à colorier? en ce moment, chaque tuile devient jaune lol

@DevMoutarde apparemment, il doit vraiment être lié à l'aide de crochets. Vérifiez ma mise à jour. Vérifiez également le stackblitz que j'ai joint pour un exemple de travail

3
votes

Essayez "'red'" dans [style.background

[style.background]="tile.color"

Code de démonstration ici

Mise à jour: h2>

La raison pour laquelle il a fallu des guillemets simples ' est que, selon le demo , on peut voir qu'il attend

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

ce qui montre qu'il prend angular code> variable et interpolez-la. En fournissant ', vous indiquez au composant matériel qu'il s'agit d'une chaîne et non d'une variable angulaire définie dans le composant . Sinon, avec style.backgroundColor = "red" , il recherche une variable nommée red dans le composant.

3 commentaires

Wow, cela fonctionne réellement !! Je déteste parfois la doc angulaire ... comment l'avez-vous su? Merci quand même :)

eh bien, je ne trouve toujours rien dans la documentation matérielle (ni dans le site Web angular ni dans la documentation de mon IDE, comme dans le fichier grid-tile.d.ts), pourriez-vous m'en donner une source? pour mon information: D

@DevMoutarde a ajouté une explication dans ma réponse fournie

0
votes

Cela fonctionnera

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

0 commentaires