Angular中數據循環ngFor、條件判斷ngIf、ngSwitch、執行事件(click)、表單事件(keyup)、ngClass、ngStyle的使用

場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

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

Angular新建組件以及組件之間的調用：

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

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

注：

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

實現

數據循環ngFor

首先聲明一個數組

 

public list1 = ["霸道","流氓","氣質"]

 

然后在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

首先聲明狀態屬性

 

public state = "2"

然后在html中

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

效果

 

 

執行事件click

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

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

然后在ts中

public title = "霸道流氓氣質"

  getData(){
    alert(this.title);
  }

效果

 

 

表單事件

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

<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

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

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