Ionic / Angular 2 - App崩溃试图显示未定义

Question

不确定这是否是特定的离子或角度问题。我不知道调用{{}}是什么，因此很难找到任何解决方案。

我有一个相当简单的HTML显示

<ion-content padding>
  <ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col>
          <h2>Record: {{teamStanding.wins}}-{{teamStanding.losses}}</h2>
          <p>Coach: {{team.coach}}</p>
        </ion-col>
        <ion-col>
          <!-- Placeholder -->
        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>
 </ion-content>

teamStanding和团队使用ionViewDidLoad中的数据填充

问题是，当导航到这个页面时，我得到的错误是“无法读取属性'赢得'未定义的”它正在做这个没有做过ionViewDidLoad - 它只是从不命中它，它抛出错误并停止一切。

现在，如果这是angularJS {{teamStanding.wins}}只是空白，直到它停止未定义...更令人困惑的是，我正在研究的这个项目是一个关于复数的教程，其中这个完全相同的代码执行WITHOUT错误 - 似乎将未定义的数据放入教师的{{}}中并不会导致错误。是什么赋予了？为什么这不会像我期望的那样无声地失败？

显然，如果我将teamStanding声明为一个空对象，这段代码会毫无错误地执行，但如果我正在做类似teamStanding.thing.thing.thing.thing的事情，我需要创建一个临时/虚拟对象{thing：{thing：{thing ：{thing：}}}}只是为了让它工作到ionViewDidLoad！

Answer 1

这就是安全导航操作员的用途。如果您熟悉其他语言的Elvis运算符，那就是一样的。所以，在你的例子中，它将是：

{{ teamStanding?.wins }} - {{ teamStanding?.losses }}

这样，null或undefined对象不会抛出异常。

Answer 2

我不知道调用{{}}是什么，因此很难找到任何解决方案。这称为“插值”，“数据绑定”。

为了解决你的问题，我建议你使用safe operator，因为当HTML模板尝试获取它时，teamStanding属性可能确实是未定义的。