Angular：了解文字元素顏色的屬性綁定缺乏反應性

Question

下面是我的 .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;
  }
}

下面是我的 HTML 模板，

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

這裡當我在輸入框中完全輸入「blue」時，我的 h3 文字顏色會更改為藍色。 但我注意到當我按退格鍵並且現在 textColor 的值為“blu”時，文字仍然保持藍色。我期待著回到黑色。 只有當我清除整個輸入時它才會變為黑色。 那麼html中的顏色是否保留了某種歷史呢？這是什麼作用？

Answer 1

使用純 JavaScript 操作 DOM 時也會發生同樣的情況，我為您準備了一個範例：

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

EVENT BINDING