指令：v-model="msg"

constructor(){this.state{msg:"双向数据绑定"
}render(){<input type="text" value={this.state.msg} onChange={(ev)=>this.handleChange(ev)} />{msg}
}handleChange(ev){this.setState({msg:ev.target.value  })
}

app.Module.ts:
import FromsModule from "@angular/froms";app.component.ts:
export class Appcomponent{msg:"双向数据绑定"
}app.components.html:
<input [(ngModel)]="msg" />{{msg}}

指令：
v-if v-else-if v-else v-show

使用三目（三联）运算：{true ? x:y}

指令：*ngIf没有else指令
如果想要else，要使用ng-template
demo:
<div *ngIf="isShow else elseBack">aaaaaaaaaaaaaaaaaaa</div>
<ng-template #elseBack>ddddddddddddddd</ng-template>

ng-template:模板

指令：v-for<li v-for="item,index in list" key="index">{{item}}</li>

this.state.list.map((item)=>{return <li key="item.id">{item}</li>
})

指令：*ngFor<ul><li *ngFor="let item of list,let i=index">{{i}},{{item}}</li>
</ul><ul><li *ngFor="let item of list,index as i">{{i}},{{item}}</li>
</ul>

指令：ngSwitch //多行选择

js:　　nowSwitch=1;　　listSwitch=[1,2,3];

html：

<div [ngSwitch]="nowSwitch"> //nowSwitch是什么值。就显示值为其的ngSwitchCase.  <div *ngFor="let item of listSwitch"><div *ngSwitchCase="item">{{item}}</div></div></div>

app.component.html:<input type="text" [(ngModel)]="info" (keydown)="handleAdd($event)" >  //输入框
<ul><li *ngFor="let item of list,index as i"> {{i}},{{item}} <button (click)="handleRemove(i)">X</button></li>   //显示列表
</ul>

app.component.ts:export class AppComponent {list:Array<any>=[111,222,333]; //加入数据的数组info="";    //数据绑定变量handleAdd(ev){  //添加数据的方法if(ev.keyCode===13) {this.list.unshift(this.info);this.info = "";}}handleRemove(index){  //删除数据的方法this.list.splice(index,1);}
}