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==truespan>
        <span *ngIf='useIfOfTrue'>visiblespan>
    div>
    <div>
        <span>if==falsespan>
        <span *ngIf='useIfOfFalse'>visiblespan>
    div>
    <div>
        <span>if==false&&truespan>
        <span *ngIf='useIfOfFalse&&useIfOfTrue'>visiblespan>
    div>
div>
<div>
    <div>
        <span class="line" *ngFor="let item of forArr">
            {{item}}
        span>
    div>
    <div>
        <p>use num = indexp>
        <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 valuep>
        <span class="line" *ngFor="let item of forArr;let num =index;">
            {{index}}:{{item}}
        span>
    div>          
div>
<div>
    <p>ngSwitchp>
    <div [ngSwitch]="ngSwitch">
        <span *ngSwitchCase='1'>1span>
        <span *ngSwitchCase='2'>2span>
    div>         
div>
<div>
    <div>
        <p>ngClassp>
        <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>ngStylep>
        <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">0option>
                <option value="1">1option>
                <option value="2">2option>
                <option value="3">3option>
            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 { }