угловой класс не обновляется при изменении соответствующего условия

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

В общем, происходит то, что я использую функцию debounce из lodash для вызова функции после того, как пользователь перестал набирать в течение 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));

См. демо .