場景

Angular介紹、安裝Angular Cli、創(chuàng)建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調(diào)用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目，怎樣進行簡單的邏輯判斷等。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

數(shù)據(jù)循環(huán)ngFor

首先聲明一個數(shù)組

public list1 = ["霸道","流氓","氣質(zhì)"]

然后在html中

<ul><li *ngFor="let item of list1">{{item}}</li> </ul>

效果

?

還可以使用Index獲取其索引

<ul><li *ngFor="let item of list1;let i =index;">{{item}}--{{i}}</li> </ul>

?

條件判斷ngIf

利用上面的list1的長度作為判斷條件

<p *ngIf="list1.length >3">如果list1長度>3則顯示</p> <p *ngIf="list1.length == 3">如果list1長度==3則顯示</p> <p *ngIf="list1.length < 3">如果list1長度<3則顯示</p>

?

選擇語句ngSwitch

首先聲明狀態(tài)屬性

public state = "2"

然后在html中

switch的結(jié)果是：<br> <ul [ngSwitch]="state"><li *ngSwitchCase="1">霸道</li><li *ngSwitchCase="2">流氓</li><li *ngSwitchCase="3">氣質(zhì)</li><li *ngSwitchDefault>氣質(zhì)</li> </ul>

效果

?

執(zhí)行事件click

首先在html中添加一個Button并綁定其點擊事件為getData()方法

<button class = "button" (click) = "getData()">點擊獲取數(shù)據(jù)</button>

然后在ts中

public title = "霸道流氓氣質(zhì)"getData(){alert(this.title);}

效果

?

表單事件

在html中添加一個input并綁定它的keyup事件，并且通過$event獲取參數(shù)

<input type ="text" (keyup)="keyup($event)"/>

然后在ts中

? keyup(e){console.log(e);}

運行并在輸入框中隨便輸入

?

ngClass

給div綁定提前聲明好的樣式，首先打開scss文件，聲明兩個紅綠樣式

.red {color: red;}.blue {color: blue;}

然后打開ts文件聲明一個flag

public flag = false;

最后在html中

<div [ngClass] ="{'red':flag,'blue':!flag}">ngClass的Div</div>

然后運行看效果

?

ngStyle

如果不想提前聲明好樣式而是直接在代碼中設(shè)置樣式，可以這樣

<div [ngStyle]="{'background-color':'red'}">霸道流氓氣質(zhì)</div>

?

?

總結(jié)

以上是生活随笔為你收集整理的Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。