搜尋

首頁  >  問答  >  主體

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

下面是我的 .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中的顏色是否保留了某種歷史呢?這是什麼作用?

P粉627427202P粉627427202230 天前501

全部回覆(1)我來回復

  • P粉186897465

    P粉1868974652024-04-02 12:55:00

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

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

    EVENT BINDING

    回覆
    0
  • 取消回覆