ngModelを使用してオブジェクトをテンプレートにバインドしようとしているときにエラーが発生しましたか？

Question

これは簡単なことですが、何がうまくいかないのか理解できません。

私は私のクラスでは、この持っている：

interface Message { 
    type: string; 
    email: string; 
} 

export class MyClass { 
    public message: Message; 
    public email: string; 

    constructor() { } 

    // ... 
} 

私は電子メールの変数をバインドする場合、それだけで動作します（[(ngModel)]='email'）が、私はメッセージ[(ngModel)]='message.email'をバインドしようとした場合、私はエラーを得た：Cannot read property 'email' of undefined.なぜカント角度到達私をオブジェクト変数？

Answer 1

あなたは、その特性の一つの入力を結合することが可能であるためにあなたの messageプロパティをインスタンス化する必要があり

：

export class MyClass { 
    public message: Message = { type: '...', email: '...'}; 
    public email: string; 

    constructor() { } 

    // ... 
} 

編集

あなたのケースでは、Message「をすることができますので、インターフェースですこの型のオブジェクトをインスタンス化するためにそれを使用します。リテラルオブジェクト式を使用して、タイプMessageのオブジェクトをインスタンス化する必要があります。 TypeScriptは、リテラルオブジェクトにすべての必須要素があるかどうかをチェックします。

タイプをインスタンス化する場合は、クラスを作成する必要があります。インタフェースには、コンパイルされたコードには対応がありません。

export class Message { 
    constructor(public type: string, public email: string) { 
    } 
} 

export class MyClass { 
    public message: Message = new Message('type', 'email'); 
    public email: string; 

    constructor() { } 

    // ... 
}