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,效果如下。