ng-模板語法

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

插值 文本綁定 屬性綁定 在布爾特性的情況下,它們的存在即暗示為 ,屬性綁定工作起來略有不同,在這個例子中: 如果 的值是 、`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 中使用雙向數據綁定了

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

-Advertisement-
Play Games
更多相關文章
  • 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" | | | ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...