[Javascript] '입력'의 알려진 속성이 아니기 때문에 'ngModel'에 바인딩 할 수 없습니다.


Answers

양식 입력에 양방향 데이터 바인딩을 사용하려면 Angular 모듈에서 FormsModule 패키지를 가져와야합니다. 자세한 정보는 Angular 2 공식 튜토리얼과 forms 대한 공식 문서를 참조하십시오.

Question

구성 요소가 표시되지 않아도 각도 앱을 시작할 때 다음 오류가 발생합니다.

내 앱이 작동하도록 댓글을 달아야합니다.

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
    <div>
        <label>Created:</label>
        <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
    </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

나는 영웅 plucker를보고있다. 그러나 나는 어떤 차이도 보지 않는다.

다음은 구성 요소 파일입니다.

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

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

export class InterventionDetails
{
    @Input() intervention: Intervention;

    public test : string = "toto";
}



귀하의 응용 프로그램 모듈에서 FormsModule 가져 오기.

그것은 당신의 어플리케이션을 잘 운영 할 수있게 해줄 것입니다.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

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



튜토리얼을 처음 만들었을 때 main.ts는 현재와 약간 다르게 보입니다. 매우 비슷해 보이지만 차이점을 기록하십시오 (맨 위의 내용은 정확합니다).

옳은:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

이전 자습서 코드 :

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);



나는이 질문이 앵귤러 2에 관한 것이지만, 나는 앵귤러 4에 있으며,이 답변들 중 어느 것도 도움이되지 않는다.

Angular 4에서는 구문을 사용해야합니다.

[(ngModel)]

희망이 도움이됩니다.




이것에 던지면 누군가를 도울 수 있습니다.

새로운 NgModule을 만든다고 가정하고 Auth 요구를 처리하기위한 FormsModule 을 말하면 AuthModule 에도 FormsModule 을 가져와야합니다.

FormsModule 에서만 AuthModule 을 사용한다면 기본 AppModule 에서 FormModule 을 가져올 필요가 없습니다.

AuthModule 에서 AuthModule 같이

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

FormsModule 다른 곳에서는 사용하지 않는다면 AppModule 에서 가져 오기를 잊어 버리십시오.




FormsModule을 올바르게 가져온 후에도 여전히 오류가 발생하는 경우 프로젝트가 컴파일되지 않고 (다른 오류가 있기 때문에) 콘솔에 체크인하고 솔루션이 브라우저에 반영되지 않았기 때문에 콘솔에 체크인하십시오!

내 경우, 내 콘솔 건초는 다음과 관련이없는 오류 : 속성 'retrieveGithubUser' 'ApiService'유형에 존재하지 않습니다.




Simple Soultion : app.module.ts에서

***Example 1***
import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

예 2 :

[(ngModel)]을 사용하려면 app.module.ts에 FormsModule을 가져와야합니다.

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }



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

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



Links