Question

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按钮时将调用登录功能。我没有必要单击它来启动无限循环。只有当应用程序出现在浏览器中时才会发生。

Answer 1

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

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>

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

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

1 个答案: