Javascript 使用*ngIf会导致HTTP请求的无限循环 密码或用户名错误

一切都可以正确编译，但当我刚刚启动应用程序时，一个无限循环将通过向控制台发送数百条

access denied

日志开始。这是难以置信的<代码>在屏幕上可见

---

为什么会这样？单击

login

按钮时，将调用login函数。我不必单击它来启动无限循环。当应用程序出现在浏览器中时，就会发生这种情况。

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

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

在模板中：

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

密码或用户名错误

---

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

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

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

在模板中：

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

密码或用户名错误

---

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

可能

*ngIf

位于

*ngFor

循环中？@5313M我不这样认为，请再显示一些代码。您没有提到要从哪个组件调用login。显示您的console.log（res）；您的路由文件。当您不返回true或false时，您正在调用一个函数，它可能返回null或false，所以！会把它变成现实。为什么难以置信？Angular必须不断调用该方法，以确定它是否仍应显示关联的元素。它将在每次勾选时调用该方法，以查看是否需要更新页面的状态。@H.Doe以另一种方式进行操作；不要让元素直接调用该方法，而是让组件调用该方法，并用结果设置一个布尔字段（例如，

userIsLoggedIn

）。元素仅使用该字段：

可能
*ngIf
位于
*ngFor
循环中？@5313M我不这么认为，请再显示一些代码。您没有提到要从哪个组件调用login。显示您的console.log（res）；您的路由文件。当您不返回true或false时，您正在调用一个函数，它可能返回null或false，所以！会把它变成现实。为什么难以置信？Angular必须不断调用该方法，以确定它是否仍应显示关联的元素。它将在每次勾选时调用该方法，以查看是否需要更新页面的状态。@H.Doe以另一种方式进行操作；不要让元素直接调用该方法，而是让组件调用该方法，并用结果设置一个布尔字段（例如，
userIsLoggedIn
）。元素仅使用该字段：