angulaire 4: Ne peut pas se lier à « ngModel » puisqu'il n'est pas une propriété connue de « entrée »

Question

Avant de marquer comme double s'il vous plaît lire:

Salut J'apprends angulaire 4 avec ASP .Net Core et est venu dans ce numéro. J'ai lu probablement tous les problèmes similaires où la solution est d'ajouter FormsModule, cela ne fonctionne pas avec mon problème. La chose étrange est quand je commente la ligne avec ngModel et l'exécute, cela fonctionne. Lorsque je décommente et enregistre uniquement dans VS2017, il met automatiquement à jour l'application et la liaison bidirectionnelle jusqu'à ce que je rafraîchisse la page.

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

Vous doit également importer FormsModule pour le module serveur.

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

Avec angulaire universel, nous devons diviser notre logique applicatoin par plate-forme, donc si nous regardons dans ce dossier, vous verrez le 2 racine fichiers, cette branche toute logique pour le navigateur & serveur respectivement.

• Main.Browser.ts - Ce fichier commence l'ensemble de l'application angulaire pour la plate-forme client/navigateur. Ici, nous mettons en place quelques choses, client Bootstrapping angulaire.

Vous aurez besoin à peine de toucher ce fichier, mais quelque chose à noter, c'est le fichier où vous importer les bibliothèques que vous ne voulez être utilisé dans le navigateur. (Sachez simplement que vous devrez fournir une implémentation simulée pour le serveur en faisant cela).

• Main-Server.ts - Ce fichier est où la plate-forme serveur angulaire sérialise l'application angulaire lui-même sur le serveur .NET dans un très rapide processus nœud, et il rend une chaîne. C'est ce qui provoque que la peinture initiale rapide de l'ensemble de l'application du navigateur, et aide nous obtenons tout notre bonté SEO