javascript - 相应条件更改时， Angular 类不更新

我创建了一个文本输入，如下所示：

<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;
  }

所以基本上，发生的是我正在使用debounce中的lodash函数在用户停止键入1秒钟后调用一个函数，现在该函数确实会触发，但是register__warning无法获得班级

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

编辑

我已经将console.log（）放在checkTenantName（）函数中，如下所示

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

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

谢谢

最佳答案

您正在访问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。

关于javascript - 相应条件更改时， Angular 类不更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50205917/