angular学习总结二——数据&事件绑定（ngIf、ngFor、ngSwitch、ngModel）

keywords

ngIf、ngFor、ngSwatch、ngModule、click、mouseover、mouseleave、ngStyle、ngClass

代码：

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    info = {
        name: 'zengwe',
        gender: 'man'
    };
    useIfOfTrue = true;
    useIfOfFalse = false;
    forArr = [1, 2, 3, 4, 5, 6];
    forObject = { // 模板中不能用for输出
        a: 'fdsfa',
        b: '2312312',
        c: 'ssss'
    };
    ngClass = {
        booleanValue: true,
        num: 1,
        str: 'zengwe'
    };
    ngColor = {
        color: 'red',
        fontSize: '16px'
    };
    ngSwitch= 1;
    inputValue = 'zengwe';
    selectValue = 1;
    // 事件
    countEventClick= 0;
    eventHoverStatus= '';
    countKeyDown= 0;
    countKeyUp= 0;
    eventClick() {
        this.countEventClick++;
    }
    mouseOver() {
        this.eventHoverStatus = 'hover';
    }
    mouseLeave() {
        this.eventHoverStatus = '';
    }
    keyDown() {
        this.countKeyDown++;
    }
    keyUp(e: Event) {
        //如果是原生标签的的事件，这个就是事件对象，如果是自定义事件，e为传递的值
        console.log(e);
        this.countKeyUp++;
    }
    scroll(e: Event) {
        console.log(e);
    }
}

app.component.html

<div>
    <h3>绑定数据</h3>
    <p>{{title}}</p>
</div>
<div>
    <p>name:{{info.name}},gender:{{info.gender}}</p>
</div>
<div>
    <div>
        <span>if==true</span>
        <span *ngIf='useIfOfTrue'>visible</span>
    </div>
    <div>
        <span>if==false</span>
        <span *ngIf='useIfOfFalse'>visible</span>
    </div>
    <div>
        <span>if==false&&true</span>
        <span *ngIf='useIfOfFalse&&useIfOfTrue'>visible</span>
    </div>
</div>
<div>
    <div>
        <span class="line" *ngFor="let item of forArr">
            {{item}}
        </span>
    </div>
    <div>
        <p>use num = index</p>
        <span class="line" *ngFor="let item of forArr;let num =index;">
            {{num}}:{{item}}
        </span>
    </div>
    <div>
        <p>use index,result index==undefind and not show this value</p>
        <span class="line" *ngFor="let item of forArr;let num =index;">
            {{index}}:{{item}}
        </span>
    </div>          
</div>
<div>
    <p>ngSwitch</p>
    <div [ngSwitch]="ngSwitch">
        <span *ngSwitchCase='1'>1</span>
        <span *ngSwitchCase='2'>2</span>
    </div>         
</div>
<div>
    <div>
        <p>ngClass</p>
        <span>
            [ngClass]中的键值对key-value，当value为true时，key这个class名字就显示，
            value可以是条件语句
            可以用多个键值对
        </span>
        <div [ngClass]="{red:ngClass.booleanValue}"></div>
        <div [ngClass]="{red:ngClass.num==1}"></div>
    </div>
</div>
<div>
    <div>
        <p>ngStyle</p>
        <span>
            输出style的值
        </span>
        <div [ngStyle]="{color:ngColor.color}">我也不知道该写点什么</div>
        <span>
            一般的写教程就是上面就结束了，但是其实并不是，有特殊情况比如font-size这个就报错
        </span>
        <div [ngStyle]="{fontSize:ngColor.fontSize}">我也不知道该写点什么</div>        
    </div>
</div>
<div>
    <div>
        <p>双向绑定</p>
        <div>
            <input type="text" [(ngModel)]="inputValue">{{inputValue}}
        </div>
        <p>双向绑定select标签的绑定</p>
        <div>
            <span>value:{{selectValue}}</span><br>
            <select name="" id=""[(ngModel)]="selectValue">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            ps:angular2这样好像要失败
            (ngModelChange)="function"这样去赋值
        </div>   
    </div>
</div>
<div>
    <div>
        <p>事件绑定</p>
        <span>
            需要在app.module中导入import  FormsModule  from '@angular/forms'
            然后在import中引入
        </span>
        <div>
            <button (click)='eventClick()'>点击次数：{{countEventClick}}</button>
        </div>
        <div>
            <button 
                (mouseover)='mouseOver()' 
                (mouseleave)='mouseLeave()'
                >点击次数：{{eventHoverStatus}}</button>
        </div> 
        <div>
            <input type="text" (keydown)="keyDown()">countKeyDown:{{countKeyDown}}<br>
            <input type="text" (keyup)="keyUps($event)">countKeyUp:{{countKeyUp}}<br>
        </div>
        <div style="height:100px;overflow-y:scroll;width:300px;"(scroll)="scroll($event)">
            <div style="width:inherit;height:1000px;">

            </div>
        </div>        
    </div>
</div>

双向数据绑定要导入FormsModule

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }