Je développe une fonctionnalité d'élément de style dynamique dans l'authentification du serveur d'applications et le moteur de recherche de base de données.

Lorsque searchNoResult, l'interface utilisateur est :

enter image description here

Lorsque vous cliquez sur le bouton déclenchant l'événement execSearch() -> searchSuccess est vrai et le modèle searchSuccessColor prend effet (le texte backgroundColor devient rose). Cependant, je n'arrive pas à obtenir la couleur de manière dynamique :

enter image description here

J'ai essayé de définir le modèle comme ci-dessous mais cela ne fonctionne pas :

<button class="button" 
    [disabled] = "!enableSearch"
    (click) = "execSearch()">Search State</button>
    <div *ngIf = "searchSuccess; then searchSuccessColor else searchNoResult"></div>
<ng-template #searchNoResult>
    <p>{{ stateSearchResult }}</p>
</ng-template>
<ng-template #searchSuccessColor>
    <div [ngStyle]="{backgroundColor: 'pink'}"></div>
        <p>{{ stateSearchResult }}</p>
</ng-template>

J'ai fatigué la méthode des composants comme ci-dessous mais ne fonctionne pas :

  setColor() {
    return this.searchSuccess === true ? 'pink' : 'black';
  }

Quelqu'un peut-il aider à identifier ce qui ne va pas ?

1
Fiona Chen 16 juin 2020 à 00:08

1 réponse

Meilleure réponse

Si le bloc else est utilisé uniquement pour colorer l'arrière-plan, il peut être entièrement ignoré en utilisant [style.background-color] et l'opérateur ternaire. Essayez ce qui suit

<div [style.background-color]="searchSuccess ? 'pink' : ''"><p>{{ stateSearchResult }}</p></div>

Ou si vous souhaitez utiliser ngStyle (peut-être pour inclure plus de styles), ce serait

<div [ngStyle]="{'background-color': searchSuccess ? 'pink' : ''}"><p>{{ stateSearchResult }}</p></div>

Ou vous pouvez également utiliser ngClass pour inclure conditionnellement des sélecteurs CSS.

App.component.css

.highlight {
  background-color: pink;
}

App.component.html

<div [ngClass]="{highlight: searchSuccess}"><p>{{ stateSearchResult }}</p></div>

Mise à jour : Utiliser une variable définie dans le contrôleur

Si vous ne souhaitez pas coder en dur la valeur de couleur, vous pouvez essayer de définir une variable dans le contrôleur qui contient la valeur de couleur.

Manette

export class AppComponent implements OnInit {
  backgroundColor = 'pink';

  // button `click` event handler
  execSearch() {
    ...
    this.backgroundColor = searchSuccess ? 'pink' : 'black';
  }
}

Modèle

<div [style.background-color]="backgroundColor">
  <p>{{ stateSearchResult }}</p>
</div>

<div [ngStyle]="{'background-color': backgroundColor}">
  <p>{{ stateSearchResult }}</p>
</div>

Notez l'absence de guillemets simples entourant le backgroundColor ici. Il désigne la variable dans le contrôleur. Les valeurs entre guillemets simples comme 'pink' désignent les littéraux de chaîne.

ngClass

CSS

.highlight-pink {
  background-color: pink;
}

.highlight-black {
  background-color: black;
  color: white;
}

Modèle

<div [ngClass]="searchSuccess ? 'highlight-pink' : 'highlight-black'">
  <p>{{ stateSearchResult }}</p>
</div>
1
Community 20 juin 2020 à 09:12