Question

我正在使用Angular 2构建应用程序并偶然发现了这个问题。在执行ajax调用时，我们通常以这种方式调用它们：

http.post(this.baseUrl + url, data, { headers: headers}).subscribe(
    result => {
        this.showForm = false;
    },
    error => {
        this.showForm = true;
    }
);

showForm是Component的属性，表示何时添加/删除表单，即：设置*ngIf="showForm"。如果我执行该代码，当ajax调用成功时，表单将从DOM中删除，如果调用失败，则表单保持不变。这是正确的行为。

当我执行Facebook Login API时，情况有点不同。根据教程所说，代码应该是这样的：

FB.getLoginStatus(response => {
    if (response.status === 'connected') {
        this.showForm = false;
    }
    else {
        this.showForm = true;
    }
});

当我执行该代码时，如果用户已经登录到Facebook并已在应用程序上登录（response.status为'conencted'），则代码将在this.showForm = false;内执行响应lambda。按照以前的行为，这应该是从DOM中删除表单。我已尝试在Chrome上调试它，this.showForm = true;确实已执行。

问题是，虽然执行了这行代码，但表单并未被删除。只有当我执行两次或三次这个确切的代码时，表单最终会注意到值的变化并相应地调整视图。这使得用户需要在他实际登录之前点击Facebook登录按钮（将调用该FB.getLoginStatus()）两次或三次。

这有什么问题吗？或者我使用FB.getLoginStatus()的方式是错误的？我需要一些启发。

编辑：修复错误执行的代码，如果response.status为'conencted'，则代码将执行this.showForm = false;，而不是我之前编写的this.showForm = true;。

Answer 1

我觉得你搞砸了什么。你写道：

当我执行该代码时，在用户已经登录到Facebook并且已经在应用程序上登录的情况下（response.status是＆＃39; conencted＆＃39;），代码将执行this.showForm = true;

但事实上它应该执行第一个块，所以this.showForm = false如果你有*ngIf="showForm"则应该隐藏表单。

如果您确定正确设置了变量（执行了适当的代码部分），但View本身未更新，您可以尝试手动更新视图 - 也许Angular只是没有由于Facebook的异步回调，我发现了这一变化。

检查this answer以了解如何手动运行Angular的检测。

Angular：lambda中的代码执行不会影响模板

1 个答案: