Data Binding

Add binding markup to the template HTML

to tell Angular how to connect both sides

component ----> DOM

<li>{{hero.name}}</li>

displays the component’s hero.name property value within the
element.

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

[hero] is property binding
[hero] passes the value of selectedHero
from the parent HeroListComponent to the hero property of the child HeroDetailComponent.

DOM -----> Component

<li (click)="selectHero(hero)"></li>

(click) is event binding
(click) calls the component’s selectHero method when user clicks a hero’s name

Two-way binding

<input [(ngModel)]="hero.name">

Component{ }: a data property value
Property Binding: the property value flows to the input box
Template< >: Users change and reset the property value
Event Binding: the lastest value flows back to the component

[communication between a template and its component]

[communication between parent and child components]

Reference:
https://angular.io/guide/architecture-components

本文鏈接：https://blog.csdn.net/qq_28091171/article/details/104709725

智能推薦

c#中的data binding

Data Binding Overview WPF用data binding來創建UI和數據的關聯。其中數據的來源可以是common language runtime objects或者是XML. wpf中的data binding相對于傳統的模型有很多優勢： 1. UI的大多數屬性(properties)都是支持data binding的 2. binding可以讓UI變得更加靈活 3. UI和...

WPF中的Data Binding調試指南

點擊藍字“大白技術控”關注我喲加個“星標★”，每日良時，好文必達！ WPF中的Data Binding如何Debug? 大家平時做WPF開發，相信用Visual studio的小伙伴比較多。XAML代碼曾經在某些特殊版本的Visual Studio中是可以加斷點進行調試的，不過目前多數版本都不支持在XAML加斷點來調試。那如果自己需要綁定的 Pr...

Android MVVM架構和 Data Binding的使用

什么是MVVM , 為什么需要MVVM？ MVVM是Model-View-ViewModel的簡寫. 它是有三個部分組成：Model、View、ViewModel。 Model：數據模型層。包含業務邏輯和校驗邏輯。 View：屏幕上顯示的UI界面（layout、views）。 ViewModel：View和Model之間的鏈接橋梁，處理視圖邏輯。 MVVM架構圖如下： MVVM架構通過ViewMo...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...