Angular-绑定数据

数据绑定

1.数据文本绑定

<h1>
    {{ title}}
</h1>

<div>
    1+1={{1+1}}
</div>

2.绑定html

this.text="<h2>这是一个绑定html的显示</h2>
<div [innerHTML]="h"></div>

3.绑定属性

<div [id]="id"  [title]="msg">查看属性的格式</div>

*ngFor数据循环

*ngFor 普通循环

<ul>
    <li *ngFor="let item of list">
     {{tiem}}
    </li>
</ul>

2.循环的时候设置key

<ul>
   <li *ngFor="let item  of list;let i=index;">
   {{item}}+{{i}}
   </li>
</ul>

3.template 循环数据

<ul>
 <li template="ngFor let item of list">
   {{item}}
 </li>
</ul>

*ngIF条件判断

<p *ngIf="list .length>3">这是ngIf判断是否显示,用ngIf</p>

<p template="ngIf list.length>3">这是ngIf判断是否显示，用template</p>

*ngSwitch

<ul>
 <li *ngSwitchCase=“1”>查询数据</li>
 
 <li *ngSwitchCase=“2”>删除数据</li>
 
 <li *ngSwitchCase=“3”>更新数据</li>
 
 <li *ngSwitchCase=“4”>无效数据</li>
</ul>

事件数据绑定
html中触发事件；

<button class="button" (click)="getData()">触发按钮事件</button>
<button class="button" (click)="setData()">触发按钮设置数据</button>

ts中执行方法；

/*通过自定义方法获取数据*/
getData(){
alert(this.msg);
}

setData(){
this.msg='这是设置的值'；
}

表单事件
html：

<input type="text" (Keyup)="keyUp($event)"/>

ts中：

keyUp(e){
console.log(e);
}

以上就是关于数据绑定中常用到的绑定形式的写入方式，可供参考。