angular2指令解读:ngFor,ngIf,ngSwitch,ngStyle,ngClass用法

总结于他人文档如有侵权，联系删稿

0.先给组件赋值一个测试数据

import {Component} from '@angular/core';@Component({    selector: 'ng-tag',    styles: [require('./NgTag.scss')],    template: require('NgTag.html')})export class NgTagComponent {    list:any;    ngSwitchList:any;    ngStyleList:any;    constructor() {        this.list = [{                'name': 'xiaomo'            },{                'name': 'xiaogang'            },{                'name': 'xiaomoxue'            }];        this.ngSwitchList=[            'xiaomo',            'xiaoming'        ];        this.ngStyleList={            'color':'blue',            'backgroundColor':'green'        };    };}

1. ngFor

<ul class="list-group" *ngFor="let item of list">  <li class="list-group-item">{{item.name}}</li></ul>

效果：

2. ngIf

我在组件中定义了一个list

this.list = [{        'name': 'xiaomo'    },{        'name': 'xiaogang'    },{        'name': 'xiaomoxue'    }];

我在循环这个数组对象的时候去比对item.name 如果是 xiaomo,就 出现 ngIf中的内容

<ul *ngFor="let item of list"><li *ngIf="item.name=='xiaomo'" class="list-group-item">哇,我在list列表中找到了 <span class="label label-info">{{item.name}}</span></li></ul>

效果：

3. ngSwitch

在ngSwitch="xx"。xx可以是一个表达式或者是变量。

 ngSwitchcase给定值，绑在要显示的内容上。当XX的值和case值相同时就显示该case绑定的内容

当它们的匹配表达式值与switch表达式的值匹配时，NgSwitch会戳出嵌套视图。


换一种说法：


您定义一个容器元素（在[ngSwitch] =“...”属性中放置具有开关表达式的指令的位置）
您可以在NgSwitch内部定义内部视图，并在视图根元素上放置一个* ngSwitchCase属性。
NgSwitch中的元素，但在NgSwitchCase或NgSwitchDefault指令之外的元素将保留在该位置。


ngSwitchCase指令通知父NgSwitch评估表达式时要显示的视图。 在ngSwitchCase视图中找不到匹配的表达式时，ngSwitchDefault视图将被打印出来。

我在组件中定义了一个方法，可以设置选中的值给myVal

myVal:number = 0;changeValue($event):void{    console.log($event.target.value);// 输出选中的值设给myVal    this.myVal = $event.target.value;}

有一组单选按钮，选中是myVal会改变，ngSwitch会去循环每个case,如果找到了就显示那条case中的数据，不然显示default中的数据

<div>    <h2>ngSwitch</h2>        <input name="myVal" type="radio" title="" value="1" (click)="changeValue($event)">1        <input name="myVal" type="radio" title="" value="2" (click)="changeValue($event)">2        <input name="myVal" type="radio" title="" value="3" (click)="changeValue($event)">3        <input name="myVal" type="radio" title="" value="4" (click)="changeValue($event)">4        <input name="myVal" type="radio" title="" value="5" (click)="changeValue($event)">5        <hr>       <span [ngSwitch]="myVal">          <span *ngSwitchCase="'1'">ONE</span>          <span *ngSwitchCase="'2'">TWO</span>          <span *ngSwitchCase="'3'">THREE</span>          <span *ngSwitchCase="'4'">FOUR</span>          <span *ngSwitchCase="'5'">FIVE</span>          <span *ngSwitchDefault>other</span>        </span></div>

4. ngStyle

这里的样式的值都是从组件中取出来的，也就意味着它可以动态，不过建议是封装成class，也就是ngClass

<div [ngStyle]="{'background-color': ngStyleList.backgroundColor,'color':ngStyleList.color}" [style.font-size]="30">      背景 :{{ngStyleList.backgroundColor}} <br/>      字体颜色: {{ngStyleList.color}}  </div>

效果：

5. ngClass

左边是class名[要用''包起来]，右边是一个true|false表达式

<button class="btn" [ngClass]="{'btn-danger': ngStyleList}">测试</button>

效果：