Sudut: Pengikatan sifat untuk memahami warna elemen teks tidak mempunyai kereaktifan
P粉627427202
P粉627427202 2024-04-01 17:28:52
0
1
559

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?

P粉627427202
P粉627427202

membalas semua(1)
P粉186897465

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan