如果Angular 2中不存在数据字段，如何不会出错

Question

我正在使用Angular 2构建应用程序。我也在使用数据库。 如果我输入以下代码行，我会收到错误：

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

错误是：

  

“无法读取null的属性'date'”

这实际上是一个正确的错误，因为我还没有 date 的属性。我知道将来会有一个 date 属性。

我希望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。