角度2のインターフェイスを使用して新しいレコードを追加する方法は？

Question

私はAngular 2の簡単なCRUDアプリケーションを作成しようとしていますが、新しいレコードの追加については混乱しています。

多くのNg2チュートリアルでは、オブジェクト/レコードを表すためにInterfaceを使用しています。だから私は、次の

export interface Itodo { 
    todoId: number;  
    description: string; 
} 

としての私のTODO項目を宣言し、次の

のtodo-add.component.tsとしての私のアドコンポーネントで使用して初期化

import { Component } from '@angular/core'; 

import { Itodo } from './todo' 

@Component({ 
    moduleId: module.id, 
    templateUrl: "todo-add.component.html" 
}) 
export class TodoAddComponent { 
    //todoModel: Itodo = { todoId : 5, description : "abc" }; <-- it works 
    //todoModel: todo; // for class component 
    todoModel: Itodo; 

    AddItem(): void { 
     console.log('in AddItem'); 
     console.log(this.todoModel.description); 
    } 
} 

私のHTML

<div class="form-horizontal col-md-6"> 
      <div class="form-group"> 
       <label class='col-md-3'>Description:</label> 
       <div class='col-md-6'><input type="text" class="form-control" [(ngModel)]="todoModel.description"></div> 
      </div> 

      <div class='form-group'> 
       <div class='col-md-offset-3 col-md-9'><input type="button" class="btn btn-default" (click)="AddItem()" value="Add Todo Item" /></div> 
      </div> 
     </div> 

ブラウザで次のエラーが表示されます

core.umd.js:3478 Error: Uncaught (in promise): Error: Error in http://localhost:57999/app/todo/todo-add.component.html:9:78 caused by: Cannot read property 'description' of undefined 
TypeError: Cannot read property 'description' of undefined 

「インターフェース」を「クラス」に変更した場合、すべてが罰金となります。または、モッククラスを使用してInterfaceを初期化する場合

todoModel: Itodo = { todoId : 5, description : "abc" } 

これも機能します。しかし、他のチュートリアルのようにInterfaceをどのように使うことができるのか、そしてInterfaceを使ってどのようにinstatiateするのかを知りたい。

いくつかのstackoverflow投稿では、* ngIfを使用して未定義であるかどうかを検出することを提案していますが、* ngIfと[（ngModel）]を一緒に使用して3つの方法結合。

そして、私は同じcomponent/htmlファイルにcreate/editを組み合わせたくありません。私は別のファイルとルーティングにそれらを分離したい

• TODO /追加
• のtodo /編集/ 5

あなたたちはどのようにNG2で正しくインタフェースを使用する私を啓発するだろうか？ありがとう。

Answer 1

あなた自身を理解したので、オブジェクトをインスタンス化する必要があります。これは、あなたが持っているようにそれに価値を与えるために、それをインスタンス化する一つの方法です：

todoModel: Itodo = { todoId : 5, description : "abc" } 

しかし、あなたはあまりにも空のオブジェクトをインスタンス化することができます

todoModel: Itodo = {todoId: null, description: '' } 

あなたが取得している未定義のエラーは、あなたのためでありますあなたのオブジェクトをインスタンス化していません。

*ngIf="todoModel"をビューに使用すると、todoModelが定義されていないため、入力フィールドがまったく表示されないため、オブジェクトをインスタンス化していないと実際には役に立ちません。