当相应条件发生变化时，角度类不更新

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 函数在用户停止输入1s 后调用函数，现在该函数确实触发但register__warning 没有得到.taken 类

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

编辑

我已经在 checkTenantName() 函数中放置了一个 console.log()，就像这样

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

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

谢谢

Answer 1

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

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

请参考 demo。