Angulaire : la liaison de propriété pour comprendre la couleur des éléments de texte manque de réactivité
P粉627427202
P粉627427202 2024-04-01 17:28:52
0
1
549

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粉627427202
P粉627427202

répondre à tous(1)
P粉186897465

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal