2016-11-01 5 views
1

Angular 2アプリのコンポーネントの内部に、自分のHTML内にオブジェクトを分離するスコープがあるかどうか(私は正しい専門用語であると信じています)同様の角2 - HTMLのtypescript objへの参照を取得

<div *let person = myObj.nestedObj1.nestedObj2.nestedObj3"> // THIS PART!! 
    <h2>{{person.name}}</h2> 
    <ul> 
     <li>{{person.height}}</li> 
     <li>{{person.birthday}}</li> 
     <li>{{person.position}}</li> 
    </ul> 
</div> 

方法とする:私はの線に沿って何かを言うのとにかくそこにある私のコンポーネントHTMLで

private myObj = { 
    nestedObj1: { 
    nestedObj2: { 
     nestedObj3: { 
     name: 'George', 
     height: '72 inches', 
     birthday: 'February 31', 
     position: 'Engineer', 
     favNums: [1, 2, 3, 10, 20] 
     } 
    } 
    } 
}; 

:たとえば、私はこれが私のコンポーネントのTSファイルでobjを持って言うことができますあなたが行うことができますngForループ:

<div *ngFor="let num of myObj.nestedObj1.nestedObj2.nestedObj3.favNums"> 
    <p>{{ num }}</p> 
</div> 

は、任意の洞察力が高く評価されています。

答えて

0

角度2 コンポーネントを使用する必要があります。これは常に分離スコープです。

コンポーネントのテンプレートとしてhtmlを入れ、myObjをコンポーネントの有効範囲の一部として保存するだけです。応答のための

Here is the documentation

And here is a tutorial for creating one

+0

感謝。しかし、私は角2のコンポーネントに精通しています。私は、コンポーネントテンプレート内のより小さな隔離スコープのオブジェクトへの参照を取得することを話しています。それをより明確にするために質問を編集します。 – georgej

+0

親コンポーネントと子コンポーネントを1つ使用できます。 myObjデータを親コンポーネントに保存し、html構造を子コンポーネントに保存します。バインディングを使用して、親から子へデータを渡します。子コンポーネントは独立したスコープを持ちます。あなたが属性 'let person = ...'でdivに書いたのと同じですが、代わりに 'write [person] =" expression "' – tottomotto

+0

が動作します! – georgej

関連する問題