Dev Faq
0
votes

Angulaire 4 - Changement de fond de fond de pas de pas en fonction de l'état

Je crée un pas à pas en angulaire 4. Je n'utilise pas de matériau angulaire à pas à pas. Je dois changer la couleur de fond du pastet en fonction du statut que je recevrai depuis API. Par exemple: Si l'état est "Publier", la couleur d'arrière-plan du premier pas à pas doit être orange et si l'état "publie", la couleur du premier pas doit être verte et la couleur d'arrière-plan du deuxième pas doit être orange. . Ce serait génial si quelqu'un peut aider à cela. 

getstatusBtnColor(){
   if (status== 'publish'){
        return 'orange';
      }
      else if (status == 'publishing'){
      return 'green';
      }
      }

1 commentaires

ne devriez-vous pas passer un paramètre dans getStatusbtncolor () ?? getstatusbtncolor (stepper.status) ... dans le fichier TS, vous gérez le statut transduit ... GetStatusBnColor (PaySteStatus) {Si (PayedStatus == 'Publier') {Retour 'Orange'; } else si (PayedStatus == 'Publishing') {Retour 'Green'; }}

3 Réponses :

0
votes

Utilisez les attributs de style [style.back-color] au lieu de ngstyle

{{stepper.name}} < / code>

0 commentaires
0
votes

Votre section HTML est correcte. Veuillez vérifier getStatusBtnColor méthode dactylography. Vous ne fournissez pas la dernière condition d'autre, au cas où les deux autres conditions échouent. Êtes-vous sûr que Statut a-t-il une de ces deux valeurs possibles ?? Peut essayer avec ce xxx

0 commentaires
1
votes

Votre HTML a l'air correct pour moi. Cependant, votre fonction dossier est un peu éteinte - vous n'obtenez pas la valeur du statut code> de n'importe où que je puisse voir.

Essayez quelque chose comme: p> 

getstatusBtnColor(status: string) {
  switch(status) {
    case 'publish':
      return 'orange';
    case 'publishing':
      return 'green';

    default:
      return 'red';
  }
}

4 commentaires

Bonjour @ 8YTAN, merci de votre réponse. Mais l'étui de commutation ne fonctionnera pas dans mon cas car le statut sera plus d'un et l'état est dans un objet séparé. J'ai essayé d'utiliser une boucle et de lier le statut mais cela ne fonctionne pas. Stackblitz: Stackblitz.com/edit/...

@Shradhamallick Pourriez-vous me fournir plus d'informations sur ce que vous essayez de faire? La collerblitz que vous avez liée va juste à mon exemple original ...

Salut @ 8ytan. Veuillez vérifier cette URL Stackblitz.com/edit/... < / a>. Je veux changer la couleur de fond des boutons en fonction du statut.

@Shraddh Ok, je vois votre problème. Vous semblez essayer de changer la couleur des boutons d'état en haut en fonction des données de la table - qu'essayez-vous d'atteindre? Désolé de continuer à demander plus d'informations, mais pourriez-vous m'envoyer une photo de ce que vous voulez que cela ressemble quand c'est fait?

Articles qui pourrait vous intéresser :

 Impossible d'importer le module "@ angular / material"
Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule
[ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail