Question

我已经创建了如下文字输入：

status

在我输入之后，我有一个div，警告他们已经输入了他们输入的公司名称。

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

然后在我的component.ts

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

所以基本上，正在发生的事情是我使用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函数在用户停止输入1s之后调用一个函数，现在函数会触发但是{{1} }}没有得到lodash类

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

编辑

我在checkTenantName（）函数中放了一个console.log（），如此

register__warning

我在控制台中得到了真的...所以我不知道为什么我的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 。

当相应条件改变时，角度类不更新

1 个答案: