2016-09-25 6 views
1

私のフォームには奇妙なことが起こっているのでしょうか、それとも私は正しいことをしていないかもしれません。3番目のプロパティレベルでAngular2 ngModelバインディングが定義されていません

私はあなたがクリックしたとき、それはモーダル未亡人を開き、また、引数としてアイテムを渡すことをデータで、各行のボタンがあり

form = {}; 

私のコンポーネント内でフォームオブジェクトを定義しています。

<a class="btn btn-warning" (click)="open(item)"><i class="glyphicon glyphicon-pencil"></i></a> 

これは、その起動方法であり、モーダルウィンドウを開くだけでなく、上記の目的を形成するアイテムオブジェクトを割り当てる:

open = (item: any) => { 
    this.inventoryEditModal.open(); //Opens a modal window 

    this.form = item; // the assignment 
} 

項目オブジェクトがこのようにそれをプリントアウトして、ビューに利用可能です:

{{ form | json }} // i can see all item properties 

モーダルウィンドウがので、基本的には、入力フォームフィールドがアイテムのプロパティ値で満たさが、何らかの理由第三のために取得する必要があり、ユーザがアイテムを編集するフォームが含まれていレベルが定義されていないと私は私があなたに3番目のレベルは未定義ます

<input type="text" class="form-control" [(ngModel)]="form.alarmSystem" name="wireless"> 

enter image description here

セカンドレベルのスクリーンショットを示してみましょう、なぜ理解していない:

<input type="text" class="form-control" [(ngModel)]="form.alarmSystem.wireless" name="wireless"> 

enter image description here

この問題は、第3レベルの "object.object.property"に対してのみ発生しています。私は1つの入力フィールドのみを表示していますが、フォームには8つ以上のフィールドが含まれています。これらのフィールドにはすべて同じ問題があります。

私はここで何が間違っているのか分かりませんが、論理的にはうまくいくはずです。あなたはこの問題がここやそこで起こっているのを見たことがありますか、あなた自身を経験しましたか?

ありがとうございます。

+0

実際には、第二のレベルが定義されていない「プロパティを読み取ることができない未定義の「無線」= alarmSystemは未定義です。あなたは 'console.log(form.alarmSystem)'にも試みましたか? – Supamiu

+0

はい、私は試してみましたので、基本的にはオブジェクト全体が表示され、alarmSystemも表示されます。 – itismelito

答えて

2

あなたのケースを助けるかどうかはわかりませんが、私は非常によく似た状況にありました。

私を助けたのは「セーフナビゲーションオペレータ」の使用でした。

あなたがする必要があるのは、を追加するだけだと思いますか?形態後:ドキュメントがここで見つけることができ

<input type="text" class="form-control" [(ngModel)]="form?.alarmSystem.wireless" name="wireless"> 

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator

+0

今後の参考として、安全なナビゲーション演算子を双方向バインディングでngModelとともに使用することはできません。 – DeborahK

+0

この修正は機能しません。 –

+0

角度5でこれを使用する方法 –

関連する問題