角4：無法綁定到「ngModel」，因爲它不是「輸入」

的已知屬性之前將其標記爲重複，請閱讀：角4：無法綁定到「ngModel」，因爲它不是「輸入」

您好我正在學習角4 ASP .Net Core並進入這個問題。我讀過可能所有類似的問題，解決方案是添加FormsModule，這不適用於我的問題。奇怪的是，當我用ngModel註釋掉並運行它時，它就起作用了。當我取消註釋並僅保存在VS2017中時，它會自動更新應用程序和雙向綁定，直到我刷新頁面。

app.module.client.ts：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { sharedConfig } from './app.module.shared'; 


@NgModule({ 
bootstrap: sharedConfig.bootstrap, 
declarations: sharedConfig.declarations, 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ...sharedConfig.imports 
], 
providers: [ 
    { provide: 'ORIGIN_URL', useValue: location.origin } 
] 
}) 
export class AppModule { 
}

app.component.html：

<h1>{{title}}</h1> 
<div *ngIf="selectedhero"> 
    <h2>{{selectedhero.name}} details!</h2> 
    <div><label>id: </label>{{selectedhero.heroNo}}</div> 
    <div> 
     <label>name: </label> 
     <input [(ngModel)]="selectedhero.name" placeholder="name"> 
    </div> 
</div> 

<div class='container'> 
    <router-outlet></router-outlet> 
</div> 

<h2>heros</h2> 
<ul class="heros"> 
    <li *ngFor="let hero of heros" 
     [class.selected]="hero === selectedhero" 
     (click)="onSelect(hero)"> 
     <span class="badge">{{hero.name}}</span> hero {{hero.heroNo}} 
    </li> 
</ul>

app.component.ts：

import { Component } from '@angular/core'; 

export class hero { 
    lineId: number; 
    heroNo: number; 
    name: string; 
    statusCode: number; 
} 

const HEROS: hero[] = [ 
    { lineId: 2, heroNo: 1, name: '1', statusCode: 5 }, 
    { lineId: 2, heroNo: 2, name: '2', statusCode: 5 }, 
    { lineId: 2, heroNo: 3, name: '3', statusCode: 5 }, 
    { lineId: 2, heroNo: 4, name: '4', statusCode: 5 }, 
    { lineId: 2, heroNo: 5, name: '5', statusCode: 5 }, 
    { lineId: 2, heroNo: 6, name: '6', statusCode: 5 }, 
    { lineId: 2, heroNo: 7, name: '7', statusCode: 5 }, 
    { lineId: 2, heroNo: 8, name: '8', statusCode: 5 }, 
    { lineId: 2, heroNo: 9, name: '9', statusCode: 5 }, 
    { lineId: 2, heroNo: 10, name: '10', statusCode: 5 }, 
    { lineId: 2, heroNo: 11, name: '11', statusCode: 5 }, 
    { lineId: 2, heroNo: 12, name: '12', statusCode: 5 } 
]; 

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    title = 'My Heroes'; 
    heros = HEROS; 
    selectedhero : hero; 
    onSelect(hero: hero): void { 
     this.selectedhero = hero; 
    }; 
}

來源

2017-06-16 Whistler

做同樣的事情：服務器模塊。導入FormsModule – yurzui

您正在使用哪個aspnet.core +角模板？ – yurzui

哇，它的工作:)謝謝你，但我敢肯定，我已經嘗試過這之前你知道他們爲什麼將模塊分爲3個單獨的？ – Whistler

你應該爲服務器模塊導入FormsModule。

根據https://github.com/MarkPieszak/aspnetcore-angular2-universal#client---everything-angular

具有角通用，我們需要每平臺分裂我們的applicatoin邏輯，所以如果我們看一下這個文件夾內，你會看到2根文件，該分支的整個邏輯分別用於瀏覽器&服務器。

Main.Browser.ts - 該文件啓動了客戶機/瀏覽器平臺的整個角度應用。在這裏，我們設置了一些東西，客戶端角引導。

你幾乎需要觸摸這個文件的事，但要注意，這是的地方，你會導入您只想被在瀏覽器中使用的庫文件。（只要知道你在這樣做的時候就必須爲服務器提供一個模擬實現）。

主Server.ts - 該文件是在角平臺的服務器，串行的角度應用程序本身非常快節點過程中的.NET服務器上，並呈現一個字符串。這是什麼原因導致整個應用程序的瀏覽器是初始的快速油漆，並幫助我們得出所有的搜索引擎優化的善良

來源

2017-06-16 15:14:11 yurzui

角4：無法綁定到「ngModel」，因爲它不是「輸入」

回答

相關問題