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