ng-模板語法

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

插值 文本綁定 屬性綁定 在布爾特性的情況下,它們的存在即暗示為 ,屬性綁定工作起來略有不同,在這個例子中: 如果 的值是 、`undefined false disabled 元素中。 使用 JavaScript 表達式 編寫模板表達式所用的語言看起來很像 JavaScript。 很多 JavaS ...


插值

文本綁定

<p>Message: {{ msg }}</p>

<p [innerHTML]="msg"></p>

屬性綁定

<!-- 寫法一 -->
<img src="{{ heroImageUrl }}">

<!-- 寫法二,推薦 -->
<img [src]="heroImageUrl">

<!-- 寫法三 -->
<img bind-src="heroImageUrl">

在布爾特性的情況下,它們的存在即暗示為 true,屬性綁定工作起來略有不同,在這個例子中:

<button [disabled]="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 nullundefinedfalse,則 disabled 特性甚至不會被包含在渲染出來的 <button> 元素中。

使用 JavaScript 表達式

<p>1 + 1 = {{ 1 + 1 }}</p>
<p>{{ num + 1 }}</p>
<p>{{ isDone ? '完了' : '沒完' }}</p>
<p>{{ title.split('').reverse().join('') }}</p>

<p [title]="title.split('').reverse().join('')">{{ title }}</p>

<ul>
  <li [id]="'list-' + t.id" *ngFor="let t of todos">
    {{ t.title }}
  </li>
</ul>

編寫模板表達式所用的語言看起來很像 JavaScript。 很多 JavaScript 表達式也是合法的模板表達式,但不是全部。

Angular 遵循輕邏輯的設計思路,所以在模板引擎中不能編寫非常複雜的 JavaScript 表達式,這裡有一些約定:

  • 賦值 (=, +=, -=, ...)
  • new 運算符
  • 使用 ;, 的鏈式表達式
  • 自增或自減操作符 (++--)

列表渲染

基本用法:

export class AppComponent {
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
}
<p>Heroes:</p>
<ul>
  <li *ngFor="let hero of heroes">
    {{ hero }}
  </li>
</ul>

也可以獲取 index 索引:

<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>

條件渲染

NgIf

<p *ngIf="heroes.length > 3">There are many heroes!</p>

ngIf<ng-template>

<ng-template [ngIf]="condition"><div>...</div></ng-template>

NgSwitch

NgSwitch 的語法比較啰嗦,使用頻率小一些。

<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>

ngswitch

事件處理

事件綁定只需要用圓括弧把事件名包起來即可:

<button (click)="onSave()">Save</button>

可以把事件對象傳遞到事件處理函數中:

<button (click)="onSave($event)">On Save</button>

也可以傳遞額外的參數(取決於你的業務):

<button (click)="onSave($event, 123)">On Save</button>

當事件處理語句比較簡單的時候,我們可以內聯事件處理語句:

<button (click)="message = '哈哈哈'">內聯事件處理</button>

我們可以利用 屬性綁定 + 事件處理 的方式實現表單文本框雙向綁定:

<input [value]="message"
       (input)="message=$event.target.value" >

事件綁定的另一種寫法,使用 on- 首碼的方式:

<!-- 綁定事件處理函數 -->
<button on-click="onSave()">On Save</button>

表單輸入綁定

文本

<p>{{ message }}</p>
<input type="text" [(ngModel)]="message">

運行之後你會發現報錯了,原因是使用 ngModel 必須導入 FormsModule 並把它添加到 Angular 模塊的 imports 列表中。

導入 FormsModule 並讓 [(ngModel)] 可用的代碼如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+++ import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
+++ FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

通過以上的配置之後,你就可以開心的在 Angular 中使用雙向數據綁定了

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

更多相關文章
  • https://sqlserver.code.blog/2020/01/22/failed-to-restart-polybase-data-movement-after-running-sp_polybase_join_group/ ...
  • 函數 與其他大多數電腦語言一樣,SQL支持利用函數來處理數據。函數 一般是在數據上執行的,它給數據的轉換和處理提供了方便。 在前一章中用來去掉串尾空格的 RTrim() 就是一個函數的例子 函數沒有SQL的可移植性強 能運行在多個系統上的代碼稱 為可移植的(portable)。相對來說,多數SQL ...
  • 計算欄位 存儲在資料庫表中的數據一般不是應用程式所需要的格式。下麵舉 幾個例子。 * 如果想在一個欄位中既顯示公司名,又顯示公司的地址,但這兩 個信息一般包含在不同的表列中。 * 城市、州和郵政編碼存儲在不同的列中(應該這樣),但郵件標簽 列印程式卻需要把它們作為一個恰當格式的欄位檢索出來。 * 列 ...
  • 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" | | | ...
一周排行
  • 記錄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