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.png
for循环  *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.ts
public 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 false
    for(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 = ' '
})