//注3.1{{hero.id}} {{hero.name}} //注4.1{{selectedHero.name}} details! id: {{selectedHero.id}} name: `,//具体样式忽略styles: [` .selected { background-color: #CFD8DC !important; color: white; } .heroes { ... }...
hero 保存列表每次迭代的当前 hero 对象。 添加click 事件绑定# 事件监听器 可以声明事件监听器来监听并响应用户的操作,比如按键、鼠标移动、单击和触摸等。你可以通过在圆括号中指定事件名称来声明一个事件监听器: <!-- ... --> click 外面的圆括号会让 Angular 监听这个 元素的 click 事件。 当用户点...
将hero字段替换为AppComponent中的公共heros字段,并使用模拟英雄进行初始化(不要忘记导入):lib/app_component.dart (heroes) 代码语言:javascript 复制 import 'src/mock_heroes.dart'; // ··· class AppComponent { final title = 'Tour of Heroes'; List<Hero> heroes = mockHeroes; // ··· } 英雄...
你可以单击主面板上的两个链接("Dashboard" 和 "Heroes")来在主面板视图和英雄视图之间进行导航。 如果你在主面板中单击英雄名称 "Magneta" 时,路由将会打开 "Hero Details(英雄详细)"页面。在这个页面中,你可以对英雄的名字进行修改。 单击"Back(返回按钮)",应用将会让你返回到 Dashboard(主面板)页面中。顶...
如果你在主面板中单击英雄名称 "Magneta" 时,路由将会打开 "Hero Details(英雄详细)"页面。在这个页面中,你可以对英雄的名字进行修改。 单击"Back(返回按钮)",应用将会让你返回到 Dashboard(主面板)页面中。顶部的链接能够让你在任何时候都能够返回到主页面。如果你单击 "Heroes(英雄列表)",引用将会将英雄以列...
1、上来仍然是打开命令行,在我们的网页所在目录angular2-tour-of-heroes下输入npm start,将网页启动起来,然后开着命令行别动。 2、目前我们的网页内容包含了两个部分,一个是heroes列表的部分,另一个是单击列表中的hero显示的hero details的部分,这两个部分的功能都非常简单,但其实都是可以进行扩展的,所以最好不要...
exportclassHomePage{constructor(privatenavController:NavController){}publictitle='Tour of Heroes';publichero:Hero={id:1,name:'Windstorm',}}exportclassHero{constructor(id:number,name:string){}} 效果图 home.html改为如下: <ion-contentpadding>{{ title }}{{ hero.name }} details!<ion-lable>id:<...
{{hero.name}} 上面这个代码片段遍历了一组 hero,而我比较关心的几点是: 通过星号来声明一个“母版”实在是太晦涩了 hero 前的英镑符号(#)用于声明一个局部模版变量。这个概念感觉非常鸡肋(如果你偏好不使用 #,你也可以使用var- 前缀写法) 为HTML 加入了循环语义的HTML 特性(attribute)ngFor 是...
如果你在主面板中单击英雄名称 "Magneta" 时,路由将会打开 "Hero Details(英雄详细)"页面。在这个页面中,你可以对英雄的名字进行修改。 单击"Back(返回按钮)",应用将会让你返回到 Dashboard(主面板)页面中。顶部的链接能够让你在任何时候都能够返回到主页面。如果你单击 "Heroes(英雄列表)",引用将会将英雄以列...
要自动化该数据流,请在表单元素和hero.name属性之间设置双向数据绑定。 双向绑定 重构HeroesComponent模板中的详细信息区域,使其如下所示: name: [(ngModel)]是Angular的双向数据绑定语法。 在这里,它将hero.name属性绑定到HTML文本框,以便数据可以在两个方向上流动:从hero.name属性到文本框,从文本框返回到hero.nam...