ng-指令

来源:https://www.cnblogs.com/ygjzs/archive/2020/01/22/12228096.html

在 Angular 中最常用的指令分為兩種,它們分別是 屬性型指令 和 結構型指令 。 NgClass 作用:添加或移除一組 CSS 類 NgStyle 作用:添加或移除一組 CSS 樣式 NgModel 作用:雙向綁定到 HTML 表單元素 NgIf 作用:根據條件添加或移除 DOM 語法: 我們 ...


在 Angular 中最常用的指令分為兩種,它們分別是 屬性型指令結構型指令

NgClass

  • 作用:添加或移除一組 CSS 類

NgStyle

  • 作用:添加或移除一組 CSS 樣式

NgModel

  • 作用:雙向綁定到 HTML 表單元素

NgIf

  • 作用:根據條件添加或移除 DOM
  • 語法:
<div class="box" *ngIf="false">看不見我</div>

我們也可以通過類綁定樣式綁定來顯示或隱藏一個元素。

<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>

<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>

NgSwitch

  • 作用:類似於 JavaScript 中的 switch 語句,根據條件渲染多個選項中的一個。
  • 語法:該指令包括三個相互協作的指令:NgSwitchNgSwitchCaseNgSwitchDefault
<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
</div>

NgFor

  • 作用:列表渲染
  • 語法:
<div *ngFor="let hero of heroes">{{hero.name}}</div>

帶索引的 *ngFor

<ul>
  <li *ngFor="let item of todos; let i = index">{{ item.title + i }}</li>
</ul>

自定義指令

參考文檔:


您的分享是我們最大的動力!

更多相關文章
  • 計算欄位 存儲在資料庫表中的數據一般不是應用程式所需要的格式。下麵舉 幾個例子。 * 如果想在一個欄位中既顯示公司名,又顯示公司的地址,但這兩 個信息一般包含在不同的表列中。 * 城市、州和郵政編碼存儲在不同的列中(應該這樣),但郵件標簽 列印程式卻需要把它們作為一個恰當格式的欄位檢索出來。 * 列 ...
  • 1.首先我們可以用管理員用戶以sysdba的身份登錄oracle sqlplus username/password as sysdba 2.然後我就可以來創建用戶了. create user username identified by password; 3.創建好用戶我們接著就可以修改用戶的密 ...
  • Ecmascript 6 ECMAScript 6.0(以下簡稱ES6)是JavaScript語言的下一代標準,已經在2015年6月正式發佈了。 Ecmascript 是 JavaScript 語言的標註規範 JavaScript 是 Ecmascript 規範的具體實現 + 具體實現取決於各大瀏覽 ...
  • 我的項目由客戶端、後臺管理、資料庫和伺服器三部分組件,每次啟動項目都要一個一個啟動,挺麻煩的,現在寫一個.bat文件來批處理命令。 這個是我的啟動文件內容。 第一行運行的我wampServer伺服器,我用這個來運行和管理mySql 第二行,先啟動一個新的命令行視窗,\K 是為了不讓視窗自動關閉,我需 ...
  • app.module 路由模塊 路由守衛 統一處理認證 註冊 登錄 頁面刪除功能 typescript import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router' import ...
  • 創建組件,指令,過濾器和服務 可輔助創建資源的功能列表: | Scaffold | Usage | | | | | "Component" | | | "Directive" | | | "Pipe" | | | "Service" | | | "Class" | | | "Guard" | | | ...
  • 插值 文本綁定 屬性綁定 在布爾特性的情況下,它們的存在即暗示為 ,屬性綁定工作起來略有不同,在這個例子中: 如果 的值是 、`undefined false disabled 元素中。 使用 JavaScript 表達式 編寫模板表達式所用的語言看起來很像 JavaScript。 很多 JavaS ...
  • 啟用 Http 服務 open the root , import the symbol from , add it to the array. 發起一個 get 請求 Reading the full response 錯誤處理 ...
一周排行
  • 記錄LINQ學習過程。 概要 LINQ是一種“語言集成”的查詢表達式,使用LINQ可以智能提示和進行類型檢查。C#里可以編寫的LINQ查詢有SQL資料庫、XML文檔、ADO.NET數據集、支持IEnumerable和IEnumerable的對象。使用LINQ,可以簡單對數據源進行分組、排序、篩選。有 ...
  • mssql是.NET的標配,一般使用.NET的人基本都用mssql。 以前mssql只能支持windows平臺,從微軟打出 擁抱開源 的口號開始,mssql的2017 版本,開始支持linux系統。 一開始,我是直接在centos中安裝mssql的,總的來說,比windows快很多。但是現在都使用容 ...
  • 首先看 ServiceCollection 的定義 //定義 public class ServiceCollection : IServiceCollection { private readonly List<ServiceDescriptor> _descriptors = new List< ...
  • Entity Framework框架提供了幾種開發模式,比如Database First,Model First,Code First。Database First是最老也是應用得最廣泛的一種設計方式。Database First這種方式的設計高度依賴於資料庫中表的結構,根據表及表間的關係來創建模型 ...
  • 1,安裝WinccV7.4並破解: 安裝WinccV7.4SP1. 安裝授權文件---根據提示 安裝免狗驅動,根據提示 安裝SImatic.net v13.2,連接PLC, 首先在同一個區域網裡面,如果是路由器,則可以採用禁用/啟用網路的方法進行讓路由器分配IP地址. 然後在控制面版--->PG..... ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/8242238.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第十一個模式--解釋器模式,也是面向對象設計模式的最後一個模式。先要說明一下,其實這個模式不是最後一個模 式(按Go ...
  • 最近在給客戶開發 Azure DevOps Exension, 該擴展中某個功能需要調用使用 .NET Core 3 寫的 Web Api。 在拜讀了 "Authenticating requests to your service" 之後,我給 Web Api 增加了 JWT 認證。 PS: 我沒 ...
  • PPT導出圖片質量太差?簡單操作直接導出印刷質地圖片 ​ PPT不僅可以用於展示文檔,還可以用於簡單圖片合成處理,同時,PPT文檔還可以全部導出為圖片. 預設情況下,PPT導出的圖片為96DPI,辛苦做的圖片無法適應很多場合的使用。其實,在windows 下只需要一個小小的設置,就可以導出300DP ...
  • 安裝JDK1.8,安裝時會安裝jdk、jre。 如果只是在IDEA中寫寫代碼,安裝完jdk,在IDEA中指定jdk路徑就可以了。 如果要在命令行下執行jdk的命令,比如java、javac,或者要使用tomcat等依賴jdk的,就需要配置jdk的環境變數。 jdk環境變數的配置 1、JAVA_HOM ...
  • (1)集群原理 在Redis集群中,所有的Redis節點彼此互聯,節點內部使用二進位協議優化傳輸速度和帶寬。 當一個節點掛掉後,集群中超過半數的節點檢測失效時才認為該節點已失效。不同於Tomcat集群 需要使用反向代理伺服器,Redis 集群中的任意節點都可以直接和Java客戶端連接。Redis 集 ...
x