Question

在我的angular 2应用程序中，我尝试使用ngmodel绑定视图数据，但它没有像我预期的那样工作。

event.component.html

 <div  class="form-group">
     <label for="comment">About Us:</label>
         <input type="text" name="aboutus" class="form-control" 
 [(ngModel)]="home.aboutus" required placeholder="aboutus"/>{{home.aboutus}}

 </div>

homemenu.ts

  export class Home {
  aboutus: string;
    }

eventcomponent.ts export class EventComponent { home:Home; } constructor() { }

Answer 1

应该只是 aboutus

  <input type="text" name="aboutus" class="form-control" 
 [(ngModel)]="aboutus" required placeholder="aboutus"/>{{aboutus}}

Answer 2

您需要在事件component.ts中初始化home：

export class EventComponent {
       home:Home = new Home(); 
       constructor() { }
   }

Answer 3

由于home未初始化，因此home.aboutus未与html模板绑定。

尝试以下代码

export class EventComponent {
    home:Home;

    constructor() {
        this.home = new Home();
    }

}

Answer 4

在像

这样的构造函数中初始化类变量总是好主意

export class EventComponent {
   home:Home = null; // or home:Home; 
   constructor() { 
        this.home = new Home()
    }
}

Answer 5

绑定home实例属性而绑定[（ngModel）] =“home.aboutus”使用字符串插值{{home.aboutus}}吐出输入的值。

export class EventComponent{
      home: Home;
      constructor() {
        this.home = new Home();
      }
}

2路数据绑定在角度2中不起作用

5 个答案: