angular8组件新增 基本语法 双向数据绑定

angular8

1 新增组件

创建 ng g component components/news引入 import NewsComponent from '../../components/news'使用 <app-news></app-news>

2 生明变量

public private protected any string 等public user:string="张三"public list:any[] = [] public items:Array<string/num> = [] public list=[]

3 语法

解析HTML [innerHTML]="conent"图片 [src] = "src" 引用静态资源 assets/image/1.pngfor循环 *ngFor = "let i of items,let key=index" index是索引if判断 *ngIf = 'key==1' class="red" 注：没有ngElse [ngSwitch] = 'tab'<span [ngSwitch="tab"]><p *ngSwitchCase="1"><p *ngSwitchCase="2">class [ngClass] = "{'red':true}"style[ngStyle]管道{{data | date:"YYYY-MM-DD HH:mm:ss"}}{{data|json}}

**4 双向数据绑定 **

app.module.ts中引入import {FormsModule} from '@angular/forms'imports:[FormsModule]news.tspublic pre={use:"san", sex:'2',citys:['1','2','3'],city:'1',hobby:[{title:'1',checked:false},{title:'2',checked:false},{title:'3',checked:true}]}news.html<input type="text" [(ngModel)]="pre.use" /><input type="radio" value="1" name="sex" [(ngModel)]="pre.sex" /><select name="city" id="city" [(ngModel)]="pre.city"><option [value]="item" *ngFor="let item of pre.citys" ></select><input type="checkbox" [(ngModel)]="item.checked" *ngFor="let item of pre.hobby"/>{{item.title}}<textarea [(ngModel)]="pre.mark">

6 注

一个标签不能使用多个属性

[hidden]隐藏

7 插入字段判断有无封装

todolistHasKeyword(todelist:any,keyword:any){if(keyword) return falsefor(var i=0;i<todolist.length;i++){if(todolist[i].title==keyword){return true}}}使用时 if(!this.todolistHasKeyword(this.todolist,this.keyword){this.todolist.push({title:this.keyword,status:0})this.keyword=' '}else{this.keyword = ' '})