angular:异步调用返回时启用按钮

Question

这可能很简单：我有一个像一样定义的按钮

<button mat-raised-button color="accent" class="reserve" [disabled]="buttonIsDisabled()"

其中按钮IsDisabled定义为

buttonIsDisabled() {
return !(this.data_privacy && this.captcha.length > 0);
}

this.captcha是通过某种异步调用接收其值的字符串。

在这种设置中，只有在重新评估功能时，在屏幕上单击下一次后，按钮才会启用。一旦设置了this.captcha的值，有没有办法启用按钮？

Answer 1

以下是@unminder为我指出的解决方案：

在我们的应用程序组件中导入ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

然后将它传递给您的组件构造函数，例如cd和therafter，在您的回调中将值分配给this.captcha之后，在下面的方法中运行

this.cd.detectChanges();

Answer 2

原因是角度变化检测策略必须在@component元数据中推送。因此，每当组件中的任何值更新时，您都需要使用ChangeDetectorRef服务来运行它

import { ChangeDetectorRef } from '@angular/core';
...
...
...
constructor(private ref:ChangeDetectorRef)

在ref实例上，您将获得detectchanges((；

此外，如果你想使用角度默认变化检测

@Component({
selector: 'newsletter',
changeDetection: ChangeDetectionStrategy.OnPush, <--- change this to Default
template: `...`
})