Angular 1.2 数据集绑定与点击事件

    组件：

       

（1）.数据集绑定。

         1.我们先新建mock-heroes.ts 来模拟数据源，用来绑定页面显示。

           

          2.然后我们回到heroes.component.ts 对模拟数据进行引用。

          

          3.在heroes.component.html 绑定并显示数据。

         

          *ngFor是Angular的转发器指令。它为列表中的每个元素重复主机元素。

          不要忘记前面的星号（*）ngFor。这是语法的关键部分。

          4.运行命令：ng serve --open,显示效果如下。

         

（2）添加点击事件与样式。

         1.在原数据显示的基础上添加点击事件，点击之后显示明细；在heroes.component.html页面添加点击事件并添加明细模块。

         

          *ngIf 根据selectedHero是否有值来控制明细模块的显示与隐藏。

        2.在对应的heroes.component.ts中添加事件函数并作逻辑处理。

        

        3.在heroes.component.css中为页面添加样式。

        

       4.运行命令：ng serve --open,效果如下。