2016-11-17 47 views
3

我剛剛完成嘗試修復下面的問題4個小時。Angular 2/Ionic 2未定義的屬性導致模板不刷新

<ion-card *ngIf="user"> 
     <ion-item> 
     <h2>{{user.FirstName}}!</h2> 
     <p>{{user.Company.Name}}</p> 
     </ion-item> 
</ion-card> 
<some-other-component></some-other-component> 


user = { 
    FirstName: 'Nick' 
}; 

請注意,user.Company未設置。我的整個組件停止工作。不只是ion-cardsome-other-component呈現一次,然後停止更新。它響應點擊事件,但從不更新。

我的問題是:有沒有辦法強制Angular/Ionic顯示它無法渲染而不是失敗?

我的修復是:<p>{{user?.Company?.Name}}</p>我很害怕我們現在要檢查每個物體的存在。我想知道是否有什麼我只需要設置/配置,以改變它的行爲。期望的結果是控制檯錯誤,或者像Angular 1.x那樣渲染。

回答

1

這種情況下只需要一個elvis操作符(?)。既然你包括*ngIf="user"ion-card元素,你只需要檢查Company屬性不爲null這樣的:

<p>{{user.Company?.Name}}</p> 
+0

無論我的解決方案的關鍵是我不想爲每一塊可能爲空的數據做這件事。問題是我如何得到角度要麼大聲出錯,要麼讓它忽略空值。 – Nix

+1

@Nix我同意sebaferreras答案,如果你有空公司數組或數據int他公司數組然後在.ts文件中你必須使用的條件和推空值到本地創建的數組在您成功回調發布或獲取API調用。 –

+0

你知道這在現實世界的數據模型中有多不切實際嗎?正如我的問題所述,我正在尋找「elvis」以外的東西。 – Nix

2

沒有,沒有設置強制運行時錯誤的渲染。你必須用'?'檢查任務或綁定到檢查內部賦值的方法。

相關問題