我正在嘗試學習Angular和Angular-CLI。所以我用Angular-CLI創建了一個項目，從一開始似乎運行得很好。現在測試我改變app.component.html文件到以下幾點：雙向綁定不起作用

<h1>Input your name:</h1> 
<input type="text" [(ngModel)]="name"> 
<p>Your input: {{ name }}</p>

和我的相應app.component.ts：

... 
export class AppComponent { 
    name = ''; 
}

，我發現了錯誤：

Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'.

此時由於某種原因，網頁上沒有呈現任何內容。我試圖改變app.component.html這樣：

<input type="text" ng-model="name"> 
...

現在的頁面呈現正確，我看到輸入框，但我型我沒有看到綁定雙向的，我不在我的<p>元素中看不見輸出。

爲什麼會發生這種情況，它如何解決？

來源

2017-09-16 Igal

'[（ngModel）] =「name」'應該有效。瀏覽器控制檯中是否有錯誤？你在'@ NgModule'中導入了'FormsModule'嗎？ – yurzui

@yurzui是的，有：'未捕獲的錯誤：模板解析錯誤：無法綁定到'ngModel'，因爲它不是'input'的已知屬性。（」

輸入您的姓名：

] [（ngModel）] = 「名稱」>

您的輸入：{{名稱}}

' – Igal

然後參閱@sachilaranawaka回答 – yurzui

您只需要在您的app.module.ts &中導入FormsModule您的問題將得到解決。像這樣的東西。

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { }

來源

2017-09-16 08:45:25

是的，這就解決了這個問題！猜猜我在我面前有一個非常陡峭的學習曲線......非常感謝！在幾分鐘內能夠接受答案。 – Igal

雙向綁定不起作用

輸入您的姓名：

回答

相關問題