Sudut: Pengikatan sifat untuk memahami warna elemen teks tidak mempunyai kereaktifan

Question

Di bawah ialah fail .ts saya,

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

Di bawah ialah templat HTML saya,

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

Di siniApabila saya menaip "biru" sepenuhnya ke dalam kotak input, warna teks h3 saya bertukar kepada biru. Tetapi saya perasan bahawa apabila saya menekan backspace dan kini nilai textColor ialah "blu", teks masih kekal biru. Saya tidak sabar untuk kembali ke hitam. Ia hanya bertukar hitam apabila saya mengosongkan keseluruhan input. Jadi adakah warna dalam HTML mengekalkan beberapa jenis sejarah? Ini buat apa?

Answer 1

Perkara yang sama berlaku apabila memanipulasi DOM menggunakan JavaScript tulen, saya menyediakan contoh untuk anda:

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

EVENT BINDING