Angular學習筆記(一)（屬性綁定）

1、建立一個名為myComName的元件：

ng g component myComName
           

2、綁定資料

控制類定義屬性：

msg='這是我的消息'
           

.html頁面中擷取上面的msg内容

{{msg}}
           

3、綁定屬性

<div [title]="msg"></div>
           

4、綁定html

控制類定義屬性

html = '<h4>我是在控制類中定義哈的html</h4>';
           

html中調用[innerHTML]屬性

<div [innerHTML]="html">

</div>
           

5、做簡單的運算

直接在模闆檔案中使用

1+2={{1+2}}
           

6、資料循環

控制類中定義數組：

heros = ['111', '12222', '33333']; // 定義數組
           

模闆檔案中調用

<ul>
  <li *ngFor="let hero of heros">
    {{ hero }}
  </li>
</ul>
           

顯示資料的索引頁很簡單，如下：

<ul>
  <li *ngFor="let hero of heros;let key=index;">
    {{key}}---------{{ hero }}
  </li>
</ul>