angular2学习笔记之ng2标签
发布时间:2020-12-17 10:05:35 所属栏目:安全 来源:网络整理
导读:angular2的内值指令和angular2很类似,所有熟悉angular1的朋友看一眼就会了。angular2-demo !-- more -- 一、 效果图 一、指令解读 0. 组件 主要就是定义了一些数据用于测试 import {Component} from '@angular/core';@Component({ selector: 'ng-tag',style
angular2的内值指令和angular2很类似,所有熟悉angular1的朋友看一眼就会了。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<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 如果是 <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我在组件中定义了一个方法,可以设置选中的值给myVal myVal:number = 0; changeValue($event):void{ console.log($event.target.value);// 输出选中的值设给myVal this.myVal = $event.target.value; } 有一组单选按钮,选中是 <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,也就是 <div [ngStyle]="{'background-color': ngStyleList.backgroundColor,'color':ngStyleList.color}" [style.font-size]="30"> 背景 :{{ngStyleList.backgroundColor}} <br/> 字体颜色: {{ngStyleList.color}} </div> 效果图 5. ngClass左边是class名[要用 <button class="btn" [ngClass]="{'btn-danger': ngStyleList}">测试</button> 效果图 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |