1. 程式人生 > >AngularJs之資料繫結

AngularJs之資料繫結

個人拙見:AngularJa使用中感覺最給力的是去掉了DOM操作

假設在我們訪問的頁面中需要顯示後臺讀取的資料,通常情況下

我們是使用ajax請求資料後,通過DOM操作元素將資料顯示在元件上

AngularJs的資料繫結在這裡我們暫且不使用資料庫,使用陣列來模擬。

1.在.ts中新建一個類(特別像java8),如圖所示:

分別是商品的id、商品名稱、商品價格、商品星級、商品描述、商品類別

2.在oninit()中初始化資料如圖所示:

3.在頁面中使用 *ngFor=“let product of products ”

products 代表在.ts中生命的物件名稱

product 表示將要使用的數組別名

通過插值表示式引入數值{{product.id}}將陣列顯示在元件上

如圖所示:

效果圖如下所示:

歡迎關注技術公眾號,微訊號搜尋ColorfulCode 程式碼男人

分享技術文章,投稿分享,不限技術種類,不限技術深度,讓更多人因為分享而受益。