如何在Angular 2中不存在數據字段時發生錯誤

Question

我正在用Angular 2構建應用程序。我也在使用數據庫。 我得到一個錯誤，如果我輸入這行代碼：

<span class="col-sm-6">{{workorder.timeWindowAppointment.date}}</span> 

的錯誤是：

「無法讀取空的特性‘日期’」

這實際上是一個是正確的錯誤，因爲我沒有日期的財產呢。我知道將來會有日期財產。

我希望Angular 2不要拋出錯誤，只是在頁面上不顯示任何內容。

Answer 1

您可以使用安全導航操作員（?）。它保護模板從null/undefined值：

<span class="col-sm-6">{{workorder?.timeWindowAppointment?.date}}</span> 

瞭解更多關於它here。

Answer 2

你可以在你的作用域中預先定義這個變量，

$scope.workorder.timeWindowAppointment.date; 

這使您可以事先獲得放置數據，也許= new Date（）。toIsoString（）;

或者你可以在你的HTML中;

<span class="col-sm-6">{{(workorder.timeWindowAppointment.date) || otherValue}}</span> 

同樣，這個做了類似的事情，但不定義變量，以防萬一它可能給你的問題，並允許您如果主不存在訪問不同的變量。

或者你可以;

<span class="col-sm-6" ng-if="workorder.timeWindowAppointment.date">{{workorder.timeWindowAppointment.date}}</span> 

這將顯示數據，如果有定義的值，但保持HTML佈局。

另一種選擇可能是;

<span class="col-sm-6" ng-show="workorder.timeWindowAppointment.date">{{workorder.timeWindowAppointment.date}}</span> 

這顯示數據，但隱藏HTML。