角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”，因为它不是“输入”

回答

相关问题