发表于： 2019-10-12 20:05:19
1 779
今天完成的事情
数据循环*ngFor
1、*ngFor 普通循环
<ul>
<li *ngFor="let item of list">
{{item}}
</li>
</ul>
2、循环的时候设置key
<ul>
<li *ngFor="let item of list;let i = index;">
{{item}} --{{i}}
</li>
</ul>
3. template 循环数据
<ul>
<li template="ngFor let item of list">
{{item}}
</li>
</ul>
条件判断*ngIf
<p *ngIf="list.length > 3">这是ngIF 判断是否显示</p>
<p template="ngIf list.length > 3">这是ngIF 判断是否显示</p>
*ngSwitch
<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li>
<li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>
执行事件(click)=”getData()”
<button class="button" (click)="getData()">
点击按钮触发事件
</button>
<button class="button" (click)="setData()">
点击按钮设置数据
</button>
getData() {
/*自定义方法获取数据*/
//获取
alert(this.msg);
}
setData() {
//设置值
this.msg='这是设置的值';
}
表单事件
<input type="text" (keyup)="keyUpFn($event)" />
<input type="text" (keyup)="keyUpFn($event)" />
keyUpFn(e){
console.log(e)
}
双向数据绑定
<input [(ngModel)]="inputValue">
注意引入：FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NewsComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
使用：
<input type="text" [(ngModel)]="inputValue"/>
{{inputValue}}
[ngClass]、[ngStyle]
[ngClass]:
<div [ngClass]="{'red': true, 'blue': false}">
这是一个div
</div>
public flag=false;
<div [ngClass]="{'red': flag, 'blue': !flag}">
这是一个div
</div>
public arr = [1, 3, 4, 5, 6];
<ul>
<li *ngFor="let item of arr, let i = index">
<span [ngClass]="{'red': i==0}">{{item}}</span>
</li>
</ul>
[ngStyle]:
<div [ngStyle]="{'background-color':'green'}">你好ngStyle</div>
public attr='red';
<div [ngStyle]="{'background-color':attr}">你好ngStyle</div>
管道
public today=new Date();
<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
今天遇到的问题
angular还不熟悉
今天的收获
知道了函数，时间，数据循环的使用
明天的计划
继续angular的学习
返回列表
评论