asp.net - Angular 4 : Can't bind to 'ngModel' since it isn't a known property of 'input'

Question

在将其标记为重复之前，请阅读:

您好，我正在使用 ASP.Net Core 学习 Angular 4 并遇到了这个问题。我可能已经阅读了所有类似的问题，解决方案是添加 FormsModule，但这不适用于我的问题。奇怪的是，当我用 ngModel 注释掉这一行并运行它时，它起作用了。当我取消注释并仅在 VS2017 中保存时，它会自动更新应用程序和双向绑定(bind)，直到我刷新页面。

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;
    };
}

Answer 1

您还应该为服务器模块导入 FormsModule。

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

With Angular Universal, we need to split our applicatoin logic per platform so if we look inside this folder, you'll see the 2 root files, that branch the entire logic for browser & server respectively.

• Main.Browser.ts - This file starts up the entire Angular application for the Client/browser platform. Here we setup a few things, client Angular bootstrapping.

You'll barely need to touch this file, but something to note, this is the file where you would import libraries that you only want being used in the Browser. (Just know that you'd have to provide a mock implementation for the Server when doing that).

• Main-Server.ts - This file is where Angular platform-server serializes the Angular application itself on the .NET server within a very quick Node process, and renders it a string. This is what causes that initial fast paint of the entire application to the Browser, and helps us get all our SEO goodness