角2：式のフィルタまたは属性プロパティにアクセスできません

Question

私は角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"を "pizza"に変更するときだけ、私は箱に書き込んだ言葉を私に見せてくれる。私はあなたが私の質問に答えることを願って

は、 ありがとうございました！ questionmarkオペレータソリューションの作品と

[OK]を、。しかし今、別の問題があります。私は表現の中でパイプを使うことはできません。公式のAngular-websiteから簡単な例をコピーしましたが、動作しません。私はそれを実行すると画面が空です。

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

pizzaが最初に定義されていないので、あなたはエルビス演算子を使用する必要があります：https://plnkr.co/edit/39yQjbWN64o0kBFgPEHR?p=preview：

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

このplunkrを参照してください。角度2つのドキュメントの状態で

Answer 2

：

角度エルビス演算子 - おそらくより良い 「安全運航事業者」として記述 - nullとundefinedに対して を守るために流暢かつ便利な方法です（？）。プロパティパスの値

ので、あなただけの持っているとき：

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

JSがnull参照エラーがスローされます（そう角度ん）。エルビス演算子を使用して（？）：

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

ビューは罰金と表示レンダリング：あなたはを探しています：（長させずに、ピザがまだ初期化されていないため）。