角2 - 例コード - 定義モデルプロパティ未定義

Question

Angular 2チュートリアルからフォームをフックアップするこの例に従おうとしています。私はログインページのコードを適応させています。ここで https://angular.io/docs/ts/latest/guide/forms.html

、私のモデルであり、ここで

export class LoginModel { 
    constructor(
     public id: number, 
     public password: string 
) {} 
} 

はコンポーネントで

import { Component, OnInit } from "@angular/core"; 

import { LoginModel } from "../Models/login.model"; 

@Component({ 
    selector: "login-form", 
    templateUrl: "views/login.component.html", 
}) 
export class LoginComponent implements OnInit { 
    model = new LoginModel(111, "true"); 
    submitted = false; 

    ngOnInit() { 
     this.model.id = 111; 
     this.model.password = "true"; 
    } 

    onSubmit(): void { 
     this.submitted = true; 
    } 

    // remove - used for debugging 
    get diagnostic(): string { 
     return "HERE: " + JSON.stringify(this.model); 
    } 
} 

のOnInitがおそらく必要とされていない、私のコンポーネントである、ちょうど私がそれを試してみるだろうと思いました。最後に、ここで

は、私はに実行し続けるエラーが "model.id" は未定義であるということです

<div class="container"> 
<h1>Login Form</h1> 
{{diagnostic}} 
<form *ngIf="model"> 
    <div class="form-group col-md-6"> 
     <label for="id">User ID:</label> 
     <input type="text" class="form-control" id="id" name="id" 
      required 
      [(ngModel)]="model.id" 
     > 
    </div> 
    <div class="form-group col-md-6"> 
     <label for="password">Password</label> 
     <input type="text" class="form-control" id="password" name="password" 
      required 
      [(ngModel)]="model.password"  
     > 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> 

、私のHTMLです。これを確認するために、* ngIf = "model"を追加しました。なぜ私のモジュールを通してインポートされたLoginComponentにモデルが定義されているとき、モデルがここで未定義として表示されているのか分かりません。

何か助けていただければ幸いです。このビットにしばらくお待ちしており、ウェブを精練するのに役立つものは何も見つかりませんでした。

Answer 1

すべてのコードはありませんが、必要なモジュールをすべてインポートしていない可能性があります。助けのためのPlunker