Angular: Der Eigenschaftsbindung zum Verstehen der Farbe von Textelementen mangelt es an Reaktivität
P粉627427202
P粉627427202 2024-04-01 17:28:52
0
1
598

Unten ist meine .ts-Datei,

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;
  }
}

Unten ist meine HTML-Vorlage,

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

HierWenn ich „blau“ vollständig in das Eingabefeld eingebe, ändert sich die Farbe meines h3-Textes zu Blau. Mir ist jedoch aufgefallen, dass der Text immer noch blau bleibt, wenn ich die Rücktaste drücke und der Wert von textColor jetzt „blau“ ist. Ich freue mich darauf, wieder schwarz zu werden. Es wird erst schwarz, wenn ich die gesamte Eingabe lösche. Behalten Farben in HTML also eine Art Geschichte? Was bewirkt das?

P粉627427202
P粉627427202

Antworte allen(1)
P粉186897465

使用纯 JavaScript 操作 DOM 时也会发生同样的情况,我为您准备了一个示例:

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

EVENT BINDING

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage