Style dynamique avec ngClass et Bootstrap 4, avec la valeur des classes récupérées à partir de Firebase en utilisant AngularFire2

Question

Je suis bloqué sur l'extraction des valeurs de Firebase et envoie la valeur dynamiquement à ngClass. Ceci est mon implémentation actuelle sans Firebase (local seulement) qui fonctionne très bien:

header.component.html

<h3>Header Background:</h3> 
<button type="button" class="btn btn-inverse" (click)="setBackgroundColor('inverse')">Inverse</button> 
<button type="button" class="btn btn-primary" (click)="setBackgroundColor('primary')">Primary</button> 
<button type="button" class="btn btn-secondary" (click)="setBackgroundColor('secondary')">Secondary</button> 
<button type="button" class="btn btn-success" (click)="setBackgroundColor('success')">Success</button> 
<button type="button" class="btn btn-info" (click)="setBackgroundColor('info')">Info</button> 
<button type="button" class="btn btn-warning" (click)="setBackgroundColor('warning')">Warning</button> 
<button type="button" class="btn btn-danger" (click)="setBackgroundColor('danger')">Danger</button> 
<hr> 

<h3>Header Text Color:</h3> 
<button type="button" class="btn btn-inverse" (click)="setTextColor('inverse')">Inverse</button> 
<button type="button" class="btn btn-primary" (click)="setTextColor('light')">Light</button> 
<hr> 

<nav [ngClass]="currentClasses"> 
</nav> 

header.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.css'] 
}) 
export class HeaderComponent { 

    currentClasses = ['navbar', 'navbar-toggleable-md', 'navbar-inverse', 'bg-inverse']; 

    setBackgroundColor(backgroundColor: string) { 
     switch (backgroundColor) { 
      case 'inverse': 
       this.currentClasses[3] = 'bg-inverse'; 
       break; 
      case 'primary': 
       this.currentClasses[3] = 'bg-primary'; 
       break; 
      case 'secondary': 
       this.currentClasses[3] = 'bg-secondary'; 
       break; 
      case 'success': 
       this.currentClasses[3] = 'bg-success'; 
       break; 
      case 'info': 
       this.currentClasses[3] = 'bg-info'; 
       break; 
      case 'warning': 
       this.currentClasses[3] = 'bg-warning'; 
       break; 
      case 'danger': 
       this.currentClasses[3] = 'bg-danger'; 
       break; 
     } 
    } 

    setTextColor(textColor: string) { 
     switch (textColor) { 
      case 'inverse': 
       this.currentClasses[2] = 'navbar-inverse'; 
       break; 
      case 'light': 
       this.currentClasses[2] = 'navbar-light'; 
       break; 
     } 
    } 
} 

Maintenant, cela fonctionne très bien, si je sélectionne primaire la couleur va changer à fond bleu, si je choisis Danger, il va changer en rouge, etc etc

Mais alors je veux enregistrer la valeur de la classe dans Firebase, et puis mettre à jour le style dynamiquement dans [ngClass] chaque fois que la valeur change.

Je suis capable de récupérer les données dynamiquement en utilisant les documents angularfire2.

Ceci est mon code: list.component.ts

import { Component } from '@angular/core'; 
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; 

@Component({ 
    selector: 'app-list', 
    template: ` 
    <ul> 
    <li *ngFor="let item of items | async"> 
     <input type="text" #updatetext [value]="item.text" /> 
     <button (click)="updateItem(item.$key, updatetext.value)">Update</button> 
     <button (click)="deleteItem(item.$key)">Delete</button> 
    </li> 
    </ul> 
    <input type="text" #newitem /> 
    <button (click)="addItem(newitem.value)">Add</button> 
    <button (click)="deleteEverything()">Delete All</button> 
    <h1>{{items | async |json}}</h1> 
    `, 
    styleUrls: ['./list.component.css'] 
}) 
export class ListComponent { 

items: FirebaseListObservable<any>; 

    constructor(db: AngularFireDatabase) { 
    this.items = db.list('/navbar/class'); 
    } 

    addItem(newName: string) { 
    this.items.push({ text: newName }); 
    } 
    updateItem(key: string, newText: string) { 
    this.items.update(key, { text: newText }); 
    } 
    deleteItem(key: string) {  
    this.items.remove(key); 
    } 
    deleteEverything() { 
    this.items.remove(); 
    } 
} 

Et les résultats se présentent comme suit: https://i.stack.imgur.com/x8mqJ.png

Maintenant, mon problème est, je ne peux pas trouver un moyen de lier la valeur de la liste des classes récupéré à partir de Firebase, pour être lié à la propriété [ngClass].

J'apprécie si quelqu'un peut m'aider à ce sujet. Je vous remercie!

Answer 1

Avez-vous essayé d'utiliser la directive [class], parce que je l'utilisais pour un style dynamique comme. [class]="(aT==undefined)?'icon-sort float-right':(aT==true)?'icon-sort-alt-up float-right':'icon-sort-alt-down float-right'". Dans cet exemple, je me basais sur la variable aT qui continuait à changer en arrière-plan, donc si elle n'était pas définie, je mettrais la classe à "test de l'icône-float-right" pour les autres conditions & etc.

La directive de classe est basée sur ce à quoi vous liez le pour générer une classe. Vous pouvez consulter ce Angular 2 dynamic styles blog pour plus de détails sur l'utilisation de ngClass et de ngStyles.