Angular：lambda中的代碼執行不會影響模板

我正在構建使用Angular 2的應用程序，並且偶然發現了這個問題。執行Ajax調用的時候，我們通常稱他們爲以這種方式：Angular：lambda中的代碼執行不會影響模板

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

的showForm是Component一個屬性，它指示何時添加/刪除形式，即：通過設置*ngIf="showForm"。如果我執行該代碼，那麼當ajax調用成功時，表單將從DOM中移除，如果調用失敗，則表單將停留。這是正確的行爲。

雖然我執行Facebook登錄API時有點不同。按照教程說，代碼應該是這樣的：

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

當我執行的代碼，在用戶已經登錄到Facebook和已經在應用程序中籤署的條件（response.status是'conencted' ），代碼將在響應lambda中執行this.showForm = false;。按照之前的行爲，這應該是從DOM中刪除表單。我試圖在Chrome上進行調試，並確實執行了this.showForm = true;。

問題是，雖然該行代碼已執行，但表格未被刪除。只有當我執行兩次或三次這個確切的代碼時，表單纔會最終注意到值發生變化並相應地調整視圖。這使得用戶需要點擊Facebook登錄按鈕（它會調用FB.getLoginStatus()）兩次或三次，然後才能真正登錄。

有沒有解決這個問題？或者我的方式使用FB.getLoginStatus()是錯誤的？我需要一些啓發。

編輯：。修正錯誤執行的代碼，其中，如果response.status是'conencted'，代碼會被執行this.showForm = false;，而不是this.showForm = true;這是我以前寫的。

來源

2017-08-21 Kurotsuki

它確實是「連接」。調試器加入了「if」塊。問題不在於我應該檢測連接還是不連接。即使標誌翻轉了，視圖也不會刷新。這是由@Adam Szmyd bellow回答的。 – Kurotsuki

我覺得你搞砸了一些東西。您寫道：

當我執行的代碼，在用戶已經登錄到Facebook和已經在應用程序簽署（response.status是「conencted」），代碼會被執行該條件。 showForm = true;

但實際上它應該執行第一個塊，因此this.showForm = false並且應該隱藏表格，如果您有*ngIf="showForm"。

如果您確定正確設置了變量（代碼的正確部分被執行），但視圖本身未更新，您可以嘗試手動更新視圖 - 也許Angular沒有檢測到此更改因爲Facebook的異步回調。

檢查this answer找出如何手動運行Angular的檢測。

來源

2017-08-22 05:58:47

啊...對。它運行'this.showForm = false'。修復了這個問題。感謝您的擡頭。我會看看這個參考。如果它工作，我會將其標記爲答案。 – Kurotsuki

我讀過答案。看來'NgZone。run（）'更容易被人讀取，因爲檢查手動檢測是否被實現比較容易。但'ChangeDetectorRef.detectChanges（）'更簡單，因爲我們只需要添加一行。那麼，請注意哪一個更好？ 'NgZone.run（callback）'或'ChangeDetectorRef.detectChanges（）'？ – Kurotsuki

我會說'ChangeDetectorRef.detectChanges（）'，因爲它只是在這個組件（內部狀態變量）中進行更改。但是在進行手動檢測之前，請確保它不會在回調函數中使用正確的'showForm'值 –

Angular：lambda中的代碼執行不會影響模板

回答

相關問題