場景

Angular介紹、安裝Angular Cli、創(chuàng)建Angular項(xiàng)目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調(diào)用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項(xiàng)目后，怎樣進(jìn)行數(shù)據(jù)的綁定。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

數(shù)據(jù)文本綁定

使用{{}}

首先在news.component.ts中聲明屬性

public title = "霸道流氓氣質(zhì)"

然后在news.component.html中綁定屬性

{{title}}

也可以直接在html中使用其進(jìn)行簡單的數(shù)據(jù)計(jì)算

1+1={{1+1}}

?

綁定Html

可以使用綁定屬性的方式，給div綁定innerHTML屬性來實(shí)現(xiàn)

在ts中聲明屬性

public ht = "<h2>這是一個(gè)h2，使用innerHTML來綁定</h2>"

在html中通過[]綁定屬性

<div [innerHTML]="ht"></div>

?

綁定屬性

上面可知使用[]來綁定某元素的屬性，比如

聲明兩個(gè)屬性

? public id = "123"public msg = "這是一個(gè)title"

然后在html中

<div [id]="id" [title]="msg">綁定屬性使用[]</div>

?

雙向數(shù)據(jù)綁定

使用雙向數(shù)據(jù)綁定需要在項(xiàng)目中引入FormModule

打開項(xiàng)目的根模塊app.module.ts

import { FormsModule } from '@angular/forms';

并且在imports中添加

?

然后回到需要雙向數(shù)據(jù)綁定的模塊的ts中，添加一個(gè)屬性

public inputValue ="默認(rèn)值"

然后在html中

<input type ="text" [(ngModel)]="inputValue"/> {{inputValue}}

查看效果

?

總結(jié)

以上是生活随笔為你收集整理的Angular中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。