angularjs2进阶教程1-编辑英雄

发布时间：2020-12-17 09:34:51 所属栏目：安全来源：网络整理

导读：还是 angularjs2入门1-文件结构分析的源码，将app名称tutorial-step1-editor 1.在组件app.component.ts中创建一个英雄类，有id和name两个参数 export class Hero { id: number; name: string;} 在组件控制器中写入 hero: Hero = { id: 1,name: 'Windstorm'

还是angularjs2入门1-文件结构分析的源码，将app名称tutorial-step1-editor

1.在组件app.component.ts中创建一个英雄类，有id和name两个参数

export class Hero {
  id: number;
  name: string;
}

在组件控制器中写入

hero: Hero = {
  id: 1,name: 'Windstorm'
};

页面上

  template:`
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
    <label>name: </label>
    <input value="{{hero.name}}" placeholder="name">
  </div>
  `

上面的是单向绑定，可以改成双向绑定

<input [(ngModel)]="hero.name" placeholder="name">

这个改变了input的值，<h2>的值也改变了

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!