在我的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() {
}
答案 0 :(得分:1)
应该只是 aboutus
<input type="text" name="aboutus" class="form-control"
[(ngModel)]="aboutus" required placeholder="aboutus"/>{{aboutus}}
答案 1 :(得分:1)
您需要在事件component.ts中初始化home:
export class EventComponent {
home:Home = new Home();
constructor() { }
}
答案 2 :(得分:1)
由于home
未初始化,因此home.aboutus
未与html模板绑定。
尝试以下代码
export class EventComponent {
home:Home;
constructor() {
this.home = new Home();
}
}
答案 3 :(得分:1)
在像
这样的构造函数中初始化类变量总是好主意export class EventComponent {
home:Home = null; // or home:Home;
constructor() {
this.home = new Home()
}
}
答案 4 :(得分:0)
绑定home实例属性而绑定[(ngModel)] =“home.aboutus”使用字符串插值{{home.aboutus}}吐出输入的值。
export class EventComponent{
home: Home;
constructor() {
this.home = new Home();
}
}