1
votes

Comment changer le style de bordure à l'aide de [style.border] lorsqu'une question reçoit une réponse?

J'ai du mal à changer le style de bordure de $ vivid-blue à $ medium-gray lorsque la question est répondue. Ceci est mon code:

.unanswered {
  border: 2px solid $vivid-blue !important;
}

.answered {
  border: 2px solid $medium-gray !important;
}

et dans le SCSS j'ai

<section id="question" [style.border]="!answer ? 'unanswered': 'answered'">

angular

8 commentaires

vous essayez d'attribuer une classe à un style. ça ne marche pas comme ça.

J'ai essayé

ils apparaissent tous les deux initialement en bleu mais ne deviennent pas gris.

essayez d'utiliser une variable booléenne réelle pour votre opérateur. "answer" ne sonne pas comme un booléen.

oui la réponse est un nombre []

si c'est un nombre, pourquoi utilisez-vous la syntaxe "! answer" au lieu de "answer == 0"? ce n'est probablement pas votre problème, mais son meilleur codage.

aussi, pas familier avec les signes dollar en HTML comme ça. si c'est une chose css, cela ne fonctionne peut-être pas en html

cela fonctionne,

le signe dollar fait partie de SCSS, mais ne peut pas être utilisé dans votre html. essayez d'utiliser [ngClass] si vous voulez profiter des variables SCSS.

3 Réponses :

0
votes

Utilisez ngClass pour appliquer le nom de classe de manière conditionnelle comme suit:

<section id="question" [ngClass]="applyClass()">

Vous pouvez également réaliser la même chose en déplaçant le code logique vers votre composant:

public applyClass(): string {
   return (this.answer) ? 'answered' : 'unanswered'
}

Complétez ceci dans votre modèle:

<section id="question" [ngClass]="answer ? 'answered': 'unanswered'">

0 commentaires

0
votes

utilisez

.calls {
  border: 2px solid !important;
}

<section id="question" class="calls" [style.border-color]="!answer ? 'blue': 'gray'">

<section id="question" [ngClass]="{answered: answer, unanswered: !answer}">

si vous le souhaitez pour utiliser le style pas une classe alors ce sera comme

<section id="question" [class.answered]="answer" [class.unanswered]="!answer">

et dans votre css

<section id="question" [ngClass]="!answer ? 'unanswered': 'answered'">

0 commentaires

2
votes

ceci :

<section id="question" [style.border]="!answer ? 'border: 2px solid blue !important': 'border: 2px solid gray !important'">

ou ceci:

<section id="question" [ngClass]="!answer ? 'unanswered': 'answered'">

2 commentaires

modifié ma réponse pour supprimer les signes dollar dans le html

Ok, cela semble faire l'affaire: