angular(二)

组件模板

模板中引入图片

新建一个home组件

• ng g component component/home
• 将图片复制到静态资源assets文件夹中

<h1> 引入图片 </h1>
<img src="assets/images/o1.png" alt="收藏" />

public picUrl="https://....."
<img [src]="picUrl" />

循环数据现实索引

pubilc list:any[]=[
{"title":""},
{"title":""},
{"title":""},
]
<ul>
	<li *ngFor="let item of list;let key=index">
		{{key}}---{{item.title}}
	</li>
</ul>

条件判断语句*ngIf

public flag:boolean=true:
<div *ngIf="flag">
	<img src="assets/images/02.png"/>
</div>
<div *ngIf="!flag">
	<img src="assets/images/012.png"/>
</div>
.scss
img{
 max-width:200px;
}
.red{
	color="red";
}
<ul>
	<li *ngFor="let item of list;let key=index">
		<span *ngIf="key==1" class="red">{{key}}---{{item.title}}</span>
		<span *ngIf="key!=1" class="red">{{key}}---{{item.title}}</span>
	</li>
</ul>

*ngSwitch

#1表示已支付 2支付确认订单 3已发货 4已收货 5取消
public orderStatus:number=1;
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
	表示已经支付
</p>
<p *ngSwitchCase="2">
	支付确认订单
</p>
<p *ngSwitchCase="3">
	已发货
</p>
</span>

属性ngClass、ngStyle

<div class="red">
	ngClass演示(尽量不用dom来改变class)
</div>

<div [ngClass]="{'red':true'}">
</div>
<div [ngClass]="{'blue':true,'red':false}">
</div>

<ul>
	<li *ngFor="let item of list;let key=index;"[ngClass="{'red':key==0}">
		{{key}}--{{item.title}}
	</li>
</ul>

<p style="color:red">我是一个p标签</p>
<p [ngStyle]="{'color':'red'}">我是一个p标签</p>

public attr:string='red'
<p [ngStyle]="{'color':attr}">我是一个p标签</p>

管道 自定义方法

<p>{{str | uppercase}}</p> #大写
public today:any=new Date:
console.log(this.today);
{{today | date:'yyyy-MM-dd HH:mm:ss'}}
{{ | 自定义方法}}

执行事件

<button (click)="run()"></button>
ngOnInit(){
	run(){
		alert('执行')
		}
	}
getData(){
	alert(this.title);
}
setData(){
	this.title='改变后的title';
}

表单事件 事件对象

<input type="text" (keydown)='keyDown()' />
keyDown(){
	console.log('keydown')
	}
<input type="text" (keydown)='keyDown($event)' />
keyDown(e){
	if(e.keyCode==13){
		console.log('按了下回车')
	}else{
	//e.target获取
	console.log(e.target.value);
	}
<input type="text" (keyUp)='keyUp($event)' />

<button (click)="runEvent($event)">执行方法获取事件对象</button>
runEvent(event){
	var dom:any=event.target;
	dom.style.color="red";
}

双向数据绑定 MVVM

app.module.ts
import {FormsModule} from '@angular
<input type="text" [(ngModel)]="keywords"/>
{{keywords}}
public keywords:string='这是默认值';
<button (click)='changeKeywords()'>改变keywords的值</button>
changeKeywords(){
	this.keywords='我是改变后的值';
}

表单

• ng g component components/form
• 引入主键
  • app.component.html <app-form>
  • app.module.ts声明配置好

form.component.html

<h2>人员等级系统</h2>
<div class="people_list">
	<ul>
		<li>姓名：<input type="text" id="username" [(ngModel)]="peopleInfo.username"  value="form_input" /></li>
		<li>性别：
			<input type="radio" value="1" name="sex" [(ngModel)]="peopleInfo.sex" id="sex1"><label for="sex1">男</label>
			<input type="radio" value="2" name="sex" [(ngModel)]="peopleInfo.sex" id="sex2"><label for="sex2">女</label>
		</li>
		<li>
			城市:
			<select name="city" id="city [(ngModel)]="peopleInfo.city">
				<option [value=]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
			</select>
		</li>
		<li>
			爱好：
			<span *ngFor="let item of peopleInfo.hobby;let key=index">
				<input type="checkbox"  [id]="'check'+key" [(mgModel)]="item.checked"/><label [for]="'check'+key">{{item.title}}</label>
				&nbsp;&nbsp;
			</span>
		</li>
		<li>
			备注：
			<textarea name="mark id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></text>
		</li>
	</ul>
	<button (click)="doSubmit()">获取表单内容</button>
	<br>
	<br>
	<pre>
		{{peopleInfo|json}}
	</pre>
</div>

form.component.scss

h2{
	text-align：center；
}
.people_list{
	width:400px;
	margin:0 auto;
	padding: 20px;
	border:1px solid #eee;
	li{
		height:50px;
		line-height;50px;
		.form_input{
			width:300px;
			height:28px;
			}
	}
	.submit{
		width:100px;
		height:30px;
		float:right;
		margin-right:50px;
		margin_top:120px;

}

styles.scss

*{
	margin:0px;
	padding:0px;
}
ul,ol{

form.component.ts

doSubmit(){
	//jquery dom 操作
	let usernameDom:any=document.getElementById('username');
}

public peopleInfo:any={
	username:'',
	sex:"1",
	citys:['北京','上海','深圳'],
	city:'北京',
	hobby:[{
		title:'吃饭',
		checked:false,
		},{
		title:'睡觉',
		checked:false
		},{
		title:'写代码',
		checked:true}],
	mark:''
}

doSubmit(){
	//双向数据绑定,在app.moodule.ts引入模块并声明
	console.log(this.peopleInfo.username)
}