Angular: Der Eigenschaftsbindung zum Verstehen der Farbe von Textelementen mangelt es an Reaktivität

Question

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?

Answer 1

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

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

EVENT BINDING