javascript - 当相应条件发生变化时， Angular 类不会更新

Question

我创建了一个如下所示的文本输入:

<input 
    id="tenancyName" 
    #tenancyName="ngModel" 
    class="register__form__control" 
    autoFocus 
    type="text" 
    placeholder="Business Name" 
    [(ngModel)]="model.tenancyName"
    name="tenancyName" 
    required 
    maxlength="64" />

在我输入之后，我有一个 div，这是一个警告，表明他们输入的公司名称已被占用。

<div [class.taken]="taken === true" class="register__warning">
    <p>Sorry, Business Name is already taken</p>
</div>

然后在我的 component.ts 中

import ... from ...

import * as _ from 'lodash';

@component...
export class...

  taken: boolean;

  ngOnInt() {
    const businessInput = <HTMLInputElement>document.getElementById('tenancyName');
    businessInput.addEventListener('keyup', _.debounce(this.checkTenantName, 1000));

  }

  checkTenantName() {
    this.taken = true;
  }

所以基本上，发生的事情是我使用 lodash 中的 debounce 函数在用户停止输入 1 秒后调用函数，现在该函数确实发生火灾，但 register__warning 未获取 .taken 类

我不确定我做错了什么..任何帮助将不胜感激

编辑

我已将 console.log() 放入 checkTenantName() 函数中，如下所示

checkTenantName() {
    this.taken = true;
    console.log(this.taken);
}

我在控制台中返回 true ..所以我不确定为什么我的 div 不会获得 .taken 类

谢谢

Answer 1

您正在访问this这意味着对于组件类本身，因此您需要在运行时保留原始上下文 checkTenantName功能通过 bind(this)或使用箭头功能。

// use bind(this)
businessInput.addEventListener('keyup', _.debounce(this.checkTenantName.bind(this), 1000));
// use arrow function
businessInput.addEventListener('keyup', _.debounce(() => this.checkTenantName(), 1000));

引用demo 。