angular 2学習ノートのng 2ラベル

angular 2の内値指令はangular 2とよく似ており、angular 1に詳しいすべての友达は一目で見ることができます.angular2-demo

一、効果図

一、指令解読

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

  
{{item.name}}

効果図

2. ngIf

コンポーネントにリストを定義しました

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

    },{
        'name': 'xiaomoxue'
    }];

この配列オブジェクトをループするときにitemを比較します.nameがxiaomoであればngIfの内容が現れる

 , list  {{item.name}}

効果図

3. ngSwitch

選択した値をmyValに設定する方法をコンポーネントで定義しました

myVal:number = 0;
changeValue($event):void{
    console.log($event.target.value);//  myVal
    this.myVal = $event.target.value;
}

ラジオボタンのセットがあり、myValが選択されると変更され、ngSwitchは各caseをループし、見つかったらそのcaseのデータを表示します.そうでなければdefaultのデータを表示します.

    
ngSwitch
        1
        2
        3
        4
        5
        

       
          ONE
          TWO
          THREE
          FOUR
          FIVE
          other
        

効果図

4. ngStyle

ここでのスタイルの値はすべてコンポーネントから取り出され、つまり動的であることを意味しますが、class、すなわちngClassにカプセル化することをお勧めします.

        :{{ngStyleList.backgroundColor}} 

       : {{ngStyleList.color}}
  

効果図

5. ngClass

左はclass名[''で包む]、右はtrue|false式

効果図