Angular雙向綁定的一個例子

Angular雙向綁定的一個例子

<div>
<label>name:
<input [(ngModel)]="hero.name"placeholder="name"/>
label>


div>

> [(ngModel)] is Angular's two-way data binding syntax.

Here it binds the hero.name property to the HTML textbox so that data can flow in both directions: from the hero.name property to the textbox, and from the textbox back to the hero.name.

ngModel是Angular的雙向綁定語法,將Angular model的hero.name屬性綁定到了HTML input字段上,這樣數據流可以在hero.name屬性和input字段之間雙向傳遞。

上面的代碼會導致如下錯誤:

> Failed to compile.

src/app/heroes/heroes.component.html:7:14 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

7

~~~~~~~~~~~~~~~~~~~~~~~

src/app/heroes/heroes.component.ts:6:16

6 templateUrl: './heroes.component.html',

~~~~~~~~~~~~~~~~~~~~~~~~~

Error occurs in the template of component HeroesComponent.

Angular雙向綁定的一個例子

原因是因為缺少FormsModule 的導入。

在app.module.ts裏導入FormsModule:

Angular雙向綁定的一個例子

再加入@NgModule的imports區域:

Angular雙向綁定的一個例子

最後效果如下:

Angular雙向綁定的一個例子

只要更改input field裏的值,h2區域的值也對應變化了。

Angular雙向綁定的一個例子

【來源:汪子熙的游泳故事】

聲明:轉載此文是出於傳遞更多信息之目的。若有來源標註錯誤或侵犯了您的合法權益,請作者持權屬證明與本網聯繫,我們將及時更正、刪除,謝謝。 郵箱地址:[email protected]

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1058 字。

轉載請註明: Angular雙向綁定的一個例子 - 楠木軒