Question

我是Angular 2的新手，我对表达有一个严肃的问题。当我将一个简单的表达式{{2 + 2}}放入我的模板时，它可以工作。我看到屏幕上显示数字“4”。但每当我尝试在表达式中执行更复杂的操作时，它就会失败。

import {Component} from 'angular2/core';

@Component({
  selector: 'timos-app',
  template: `
   <form>
      <input type='text' [(ngModel)]='pizza'>
      <p>
       You are looking for: {{ pizza.length }}
    </p>
    </form>
  `
})
export class PizzaApp {
}

所以，我想显示文字“你在寻找：”，然后是长度在输入框中写的单词。但它甚至没有显示“你在寻找：”。只有当我将“pizza.length”改为“披萨”时，它才会显示我写入框中的单词。

我希望你能回答我的问题，谢谢！

好的，使用questionmark-operator解决方案可行。但现在我又遇到了另一个问题。我不能在表达式中使用管道。我从官方的Angular网站上复制了一个简单的例子，但它不起作用。我运行它时屏幕是空的。

import {Component} from 'angular2/core';
@Component({
    selector: 'timos-app',
    template: `<div>
    <p>A: {{a | currency:'USD':false}}</p>
    <p>B: {{b | currency:'USD':true:'4.2-2'}}</p>
</div>`
})
export class PizzaApp {
  a: number = 0.259;
  b: number = 1.3495;
}

Answer 1

您应该使用Elvis运算符，因为pizza在开头未定义：

You are looking for: {{ pizza?.length }}

请参阅此plunkr：https://plnkr.co/edit/39yQjbWN64o0kBFgPEHR?p=preview。

Answer 2

在Angular 2文档中说明：

Angular Elvis算子（？。） - 也许更好地描述为＆＃34;安全导航操作员＆＃34; - 是一种流畅，便捷的防范方式针对属性路径中的null和undefined值。

所以，当你刚才：

<p>
       You are looking for: {{ pizza.length }}
</p>

JS抛出一个空引用错误（Angular也是如此）。使用Elvis运算符（？）：

  <p>
           You are looking for: {{ pizza?.length }}
  </p>

您的视图呈现正常并显示：您正在寻找:(没有长度，因为披萨尚未初始化）。

Angular 2：无法访问表达式

2 个答案: