javascript - 使用* ngIf会导致HTTP请求无限循环

private login() {
    this.http.get(`http://localhost/api/token/${id}`)
        .map(res => res.json())
        .subscribe(res => {
            this.response = res;
            if (this.response) {
                this.router.navigate(['/']);
            } else {
                console.log('access denied');
                return false;
            }
        });
}

<p *ngIf="!login()">Wrong password or username</p>

一切都能正确编译，但是当我刚启动应用程序时，会通过向控制台发送数百个access denied日志来开始无限循环。太不可思议了。 <p>在屏幕上可见。

为什么会发生？单击login按钮时，将调用登录功能。我不必单击它即可使无限循环开始。当应用程序出现在浏览器中时，就会发生这种情况。

最佳答案

ngIf语句会定期检查登录方法返回值的状态：这就是实际调用n次登录方法的原因。无需将ngIf绑定到登录方法的返回值，而是将语句绑定到由登录方法更改的布尔变量：这将防止触发该方法，并且观察者将对变量状态进行操作。例如，在您的控制器中...

public authError: boolean = false;

private _login() {
    this.http.get(`http://localhost/api/token/${id}`)
        .map(res => res.json())
        .subscribe(res => {
            this.response = res;
            if (this.response) {
                this.router.navigate(['/']);
            } else {
                console.log('access denied');
                // In case of error, set the auth error property to true
                this.authError = true;
                return false;
            }
        });
    }

在您的模板中：

<p *ngIf="authError">Wrong password or username</p>

请注意，我更改了登录方法的名称：按惯例，私有方法应以下划线开头。

关于javascript - 使用* ngIf会导致HTTP请求无限循环，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41425609/