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



튜토리얼을 처음 만들었을 때 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);



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

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




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

새로운 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 에서 가져 오기를 잊어 버리십시오.




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

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

[(ngModel)]

희망이 도움이됩니다.




귀하의 응용 프로그램 모듈에서 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 { }



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



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



Related