recherche

Maison  >  Questions et réponses  >  le corps du texte

Angulaire : la liaison de propriété pour comprendre la couleur des éléments de texte manque de réactivité

Ci-dessous mon fichier .ts,

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

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

  textColor = '';
  onInput = (ev: any) => {
    this.textColor = ev.target.value;
  }
}

Ci-dessous mon modèle HTML,

<div>
    <h3 [style.color]="textColor">EVENT BINDING</h3>
    <input type="text" (input)="onInput($event)">
</div>

IciLorsque je tape complètement « bleu » dans la zone de saisie, la couleur de mon texte h3 passe au bleu. Mais j'ai remarqué que lorsque j'appuie sur retour arrière et que la valeur de textColor est désormais "blu", le texte reste toujours bleu. J'ai hâte de revenir au noir. Il ne devient noir que lorsque j'efface toute l'entrée. Alors, les couleurs en HTML conservent-elles une sorte d’histoire ? Qu'est-ce que cela fait ?

P粉627427202P粉627427202230 Il y a quelques jours496

répondre à tous(1)je répondrai

  • P粉186897465

    P粉1868974652024-04-02 12:55:00

    La même chose se produit lors de la manipulation du DOM en utilisant du JavaScript pur, j'ai préparé un exemple pour vous :

    document.querySelector('input').addEventListener('input', event => {
      document.querySelector('h3').style.color = event.target.value;
    })

    EVENT BINDING

    répondre
    0
  • Annulerrépondre