'ආදාන' හි දන්නා දේපලක් නොවන බැවින් 'ngModel' සමඟ බැඳිය නොහැක.

සංරචකය දර්ශනය නොවුනත්, මගේ කෝණික යෙදුම දියත් කිරීමේදී මට පහත දෝෂය තිබේ.

<input>මගේ යෙදුම ක්‍රියාත්මක වන පරිදි මට අදහස් දැක්වීමට සිදුවේ .

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: 

මම හීරෝ ප්ලන්කර් දෙස බලමි, නමුත් මගේ කේතයෙන් කිසිදු වෙනසක් මට නොපෙනේ.

සංරචක ගොනුව මෙන්න:

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

ඔව් එයයි, app.module.ts හි, මම දැන් එකතු කළේ:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

පෝරම යෙදවුම් සඳහා ද්වි-මාර්ග දත්ත බන්ධන භාවිතා කිරීමට හැකිවීම සඳහා FormsModuleඔබේ Angularමොඩියුලයේ පැකේජය ආනයනය කළ යුතුය . වැඩිදුර තොරතුරු සඳහා බලන්න Angular 2නිල නිබන්ධන මෙහි හා නිල ප්රලේඛනය ආකාර

භාවිතා කිරීම සඳහා [(ngModel)]දී ෙකෝණික 2 , 4 සහ 5+ , ඔබ ආනයනය කිරීමට සිදුවේ FormsModule ෙකෝණික රූපය ...

ගිතුබ් හි කෝණික රෙපෝ හි ආකෘති යටතේ ද එය මෙම මාර්ගයේ ඇත :

කෝණික / පැකේජ / ආකෘති / src / විධානයන් / ng_model.ts

බොහෝ විට මේ සඳහා ඉතා සතුටක් නෙමෙයි AngularJs සංවර්ධකයින් භාවිතා කිරීමට ඔබට හැකිය ලෙස කිරන-ආකෘතිය ඕනෑම වේලාවක පෙර සෑම තැනකම, නමුත් භාවිතා කිරීමට වෙනම මොඩියුල, එම මොහොතේ ඔබ භාවිතා කිරීමට අවශ්ය ඔබ කැමති ඕනෑම දෙයක් කිරීමට ෙකෝණික උත්සාහක දිනුම් ලෙස, ngModel වේ FormsModule දැන් .

එසේම ඔබ ReactiveFormsModule භාවිතා කරන්නේ නම් එයද ආනයනය කළ යුතුය.

එබැවින් හුදෙක් app.module.ts සොයමින් ඔබ FormsModuleආනයනය කර ඇති බවට වග බලා ගන්න ...

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

FormsModule ngModelහි Angular4 සඳහා වර්තමාන ආරම්භක අදහස් මෙයයි :

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

ඔබේ ආදානය පෝරමයකින් නොව භාවිතා කිරීමට ඔබ කැමති නම්, ඔබට එය භාවිතා ngModelOptionsකර ස්වාධීනව සත්‍ය කළ හැකිය ...

[ngModelOptions]="{standalone: true}"

වැඩිදුර තොරතුරු සඳහා, බලන්න ng_model ෙකෝණික කොටසේ මෙතන

ඔබට FormsModule ආයාත කිරීමට අවශ්‍යය

App.module.ts විවෘත කරන්න

සහ පේළියක් එක් කරන්න

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

සහ

@NgModule({
imports: [
   FormsModule
],
})

මෙය විසි කිරීම යමෙකුට උපකාර කළ හැකිය.

ඔබ නව NgModule නිර්මාණය කර ඇත උපකල්පනය, කියන්න AuthModuleහැසිරවීමේ ඔබගේ සත්යාපනය අවශ්ය කැප, වග බලා ගන්න ආනයනය කිරීමට FormsModuleබව AuthModule දී ද .

ඔබ එකල FormsModuleපමණක් භාවිතා කරන්නේ නම් ඔබට පෙරනිමියෙන් AuthModuleආනයනය කිරීමට අවශ්‍ය නොවේFormModuleAppModule

ඉතින් මේ වගේ දෙයක් 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 { }

AppModuleඔබ FormsModuleවෙනත් තැනක භාවිතා නොකරන්නේ නම් ආනයනය කිරීම අමතක කරන්න .

සරල සෝල්ෂන්: app.module.ts හි

උදාහරණ 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 { }

ඔබට [(ngModel)] භාවිතා කිරීමට අවශ්‍ය මොඩියුලවල FormsModule ආයාත කරන්න.

මෙම දෝෂයෙන් මිදීමට ඔබ අනුගමනය කළ යුතු පියවර දෙකක් තිබේ

1. ඔබගේ යෙදුම් මොඩියුලය තුළ FormsModule ආයාත කරන්න
2. GNgModule සැරසිලි කරන්නා තුළ ආනයනවල වටිනාකම ලෙස එය සම්මත කරන්න

මූලික වශයෙන් app.module.ts පහත පරිදි විය යුතුය:

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';       
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

එය උපකාරී වේ යැයි සිතමි

මම කෝණික 7 භාවිතා කරමි

ප්‍රතික්‍රියාශීලී ආකෘති නිර්මාණය කිරීම සඳහා මම ෆෝම්බිල්ඩර් පන්තිය භාවිතා කරන බැවින් මට ප්‍රතික්‍රියාශීලී ෆෝම්ස් මොඩියුලය ආනයනය කිරීමට සිදුවේ.

import { 
FormsModule, 
ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ], declarations: []})

මෙම සංරචකය මූලයේ එනම් app.module.ts හි තිබේ නම් ඔබේ මූල මොඩියුලයට FormsModule ආනයනය කළ යුතුය

කරුණාකර විවෘත කරන්න app.module.ts

පෝරම මොඩියුලය @ කෝණික / ආකෘති වලින් ආයාත කරන්න

උදා:

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

සහ

@NgModule({
imports: [
   FormsModule
],
})

ඔබගේ යෙදුම් මොඩියුලය තුළ 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 { }

ඔබ භාවිතා කිරීමට අවශ්ය නම් [(ngModel)]පළමුව ඔබ ආනයනය කිරීමට අවශ්ය වන්නේ ඇයි FormsModuleදී app.module.tsහා පසුව ආනයන ලැයිස්තුවක් එක් කරන්න. මේ වගේ දෙයක්:

app.module.ts

1. ආනයන import {FormsModule} from "@angular/forms";
2. ආනයන එකතු කරන්න imports: [ BrowserModule, FormsModule ],

app.component.ts

1. උදාහරණයක්: <input type="text" [(ngModel)]="name" >
2. ඊළගට <h1>your name is: {{name}} </h1>

ngModel යනු FormsModule හි කොටසකි. NgModel සමඟ වැඩ කිරීම සඳහා එය @ කෝණික / ආකෘති වලින් ආනයනය කළ යුතුය.

කරුණාකර app.module.ts පහත පරිදි වෙනස් කරන්න:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

පිළිගත් විසඳුම යෙදීමෙන් පසුව යමෙකු තවමත් දෝෂ ලබා ගන්නේ නම්, එය ඔබට ආදාන ටැගයේ ngModel දේපල භාවිතා කිරීමට අවශ්‍ය සංරචකය සඳහා වෙනම මොඩියුල ගොනුවක් ඇති නිසා විය හැකිය. එවැනි අවස්ථාවකදී, සංරචකයේ module.ts ගොනුවේ පිළිගත් විසඳුම ද යොදන්න.

මම කෝණික 5 භාවිතා කරමි.

මගේ නඩුවේදී, මට RactiveFormsModule ද ආනයනය කිරීමට අවශ්‍ය විය.

app.module.ts (හෝ anymodule.module.ts)

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

මෙම ප්‍රශ්නය කෝණික 2 ගැන බව මම දනිමි, නමුත් මම සිටින්නේ කෝණික 4 හි වන අතර මෙම පිළිතුරු කිසිවක් උදව් කළේ නැත.

කෝණික 4 හි සින්ටැක්ස් විය යුතුය

[(ngModel)]

මෙය උපකාරී වේ යැයි සිතමි.

FormsModule නිවැරදිව ආනයනය කිරීමෙන් පසු ඔබට තවමත් දෝෂයක් තිබේ නම්, ඔබේ ව්‍යාපෘතිය සම්පාදනය නොකිරීම නිසා (ඕනෑම දෙයක් විය හැකි වෙනත් දෝෂයක් නිසා) සහ ඔබේ විසඳුම ඔබගේ බ්‍රව්සරයේ පිළිබිඹු නොවීම නිසා ඔබේ පර්යන්තය හෝ (වින්ඩෝස් කොන්සෝලය) පරීක්ෂා කරන්න!

මගේ නඩුවේදී, මගේ කොන්සෝලයට පහත දැක්වෙන සම්බන්ධයක් නැති දෝෂයක් තිබේ: දේපල 'RetrieveGithubUser' 'ApiService' වර්ගයේ නොපවතී.

මොඩියුලය තුළ ඔබ ngModel භාවිතා කිරීමට කැමති නම් ඔබට FormsModule ආනයනය කළ යුතුය

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel පැමිණෙන්නේ FormsModule වෙතින් ය. ඔබට මෙවැනි දෝෂයක් ලැබිය හැකි අවස්ථා කිහිපයක් තිබේ:

1. ඔබේ සං component ටකය ප්‍රකාශයට පත් කරන ලද ngModel භාවිතා කරන සංරචකය වන ආනයන පෙළ මොඩියුලයට ඔබ FormsModule ආනයනය නොකළේය.
2. ඔබ එක් මොඩියුලයකට FormsModule ආනයනය කර ඇති අතර එය තවත් මොඩියුලයකින් උරුම වේ. මෙම අවස්ථාවේදී ඔබට විකල්ප දෙකක් තිබේ:
   • මොඩියුල දෙකෙන්ම ආනයන අරාව තුළට ආනයනය කිරීමට පෝරම මොඩියුලයට ඉඩ දෙන්න: මොඩියුලය 1 සහ මොඩියුලය 2. රීතියක් ලෙස: මොඩියුලයක් ආයාත කිරීමෙන් එහි ආනයනික මොඩියුලවලට ප්‍රවේශය ලබා නොදේ (ආනයන උරුම නොවේ)

• ආකෘති 2 හි ද දැකගත හැකි වන පරිදි ආකෘති 1 හි ඇති ආනයන හා අපනයන අරා වෙත ආකෘති මොඩියුලය ප්‍රකාශයට පත් කරන්න.

3. (සමහර අනුවාද වලදී මම මෙම ගැටලුවට මුහුණ දුන්නෙමි) ඔබ නිවැරදිව FormsModule ආනයනය කර ඇති නමුත් ගැටළුව ආදාන HTML ටැගය මත වේ. ඔබ [(ngModel)] දී ආදාන හා වස්තුව බැඳී නම නම ටැගය විශේෂණය වූ එකතු විය යුතුයි තුලට නම සමාන විය යුතුයි නම විශේෂණය

   

දී ngModuleඔබ ආනයනය කිරීමට අවශ්ය FormsModuleනිසා, ngModelඑන්නේ FormsModule. කරුණාකර මම බෙදාගත් පහත කේතය වැනි ඔබගේ app.module.ts වෙනස් කරන්න

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

FormModule app.module ආයාත කරන්න

import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })

සමහර විට අප දැනටමත් ආනයනය කර ඇතත් BrowserModule, FormsModuleවෙනත් ආශ්‍රිත මොඩියුලයන් තවමත් මට එම දෝෂය ඇත.

එවිට මට තේරුණා අපට ඒවා ඇණවුමෙන් ආනයනය කළ යුතු බව . ඒ නිසා ඇණවුම් කළ යුතු BrowserModule, FormsModule, ReactiveFormsModule.

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule     
  ],
  providers: [],
  declarations: [
    AppComponent
  ],
  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 {}

ඔබට FormsModule ආයාත කිරීමට අවශ්‍යය

App.module.ts විවෘත කරන්න

සහ පේළියක් එක් කරන්න

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

සහ

@NgModule({
imports: [
   FormsModule
],
})

සමහර විට ඔබ වෙනත් මොඩියුලයක බෙදා නොගත් මොඩියුලයකින් සංරචකයක් භාවිතා කිරීමට උත්සාහ කරන විට මෙම දෝෂය ඇතිවේ.

උදාහරණයක් ලෙස, ඔබට මොඩියුල 2 ක් <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">ඇත. someInputVariableInModule1 මොඩියුලය 1.@Input() someInputVariableInModule1 , මොඩියුලය 1.

මෙය සිදුවුවහොත්, ඔබට වෙනත් මොඩියුලවලට ප්‍රවේශ විය හැකි වන පරිදි මොඩියුලය 1.කොම්පොනන්ට් බෙදා ගැනීමට අවශ්‍යය. එබැවින් ඔබ මොඩියුලය 1.කොම්පොනන්ට් බෙදාගත් මොඩියුලයක් තුළ බෙදා ගන්නේ නම්, මොඩියුලය 1.කොම්පොනෙන්ටා වෙනත් මොඩියුලයන් තුළ (මොඩියුලය 1 ට පිටතින්) භාවිතා කළ හැකි අතර, හවුල් මොඩියුලය ආනයනය කරන සෑම මොඩියුලයකටම @Input()ප්‍රකාශිත විචල්‍යය එන්නත් කරන තේරීම් කාරකයට ඔවුන්ගේ සැකිලි තුළට පිවිසිය හැකිය .

මගේ තත්වය සඳහා, මගේ මොඩියුලයට [CommonModule] සහ [FormsModule] ආනයනය කිරීමට මට සිදු විය

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

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

මෙය ටයිප් ස්ක්‍රිප්ට් වෙනුවට සරල ජාවාස්ක්‍රිප්ට් භාවිතා කරන පුද්ගලයින් සඳහා වේ. පහත දැක්වෙන පරිදි පිටුවේ ඉහළින් ඇති පෝරම ස්ක්‍රිප්ට් ගොනුව යොමු කිරීමට අමතරව

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

ඔබ මොඩියුලය පැටවන්නාට පැටවීම සඳහා පැවසිය යුතුය ng.forms.FormsModule. මගේ මේ වෙනස් කමක් සිදු කල පසු importsදේපල NgModuleපහත ක්රමය හා සමාන ය

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

සුබ කේතීකරණයක්!

ngModel @ කෝණික / ආකෘති වලින් ආනයනය කළ යුත්තේ එය FormsModule හි කොටසක් වන බැවිනි. එබැවින් ඔබගේ app.module.ts මේ ආකාරයෙන් වෙනස් කිරීමට මම ඔබට උපදෙස් දෙමි:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

මම RC1 සිට RC5 දක්වා උත්ශ්‍රේණිගත කර මෙම දෝෂය ලැබුණි.

මම මගේ සංක්‍රමණය සම්පූර්ණ කළෙමි (නව app.module.tsගොනුවක් හඳුන්වා දීම , package.jsonනව සංස්කරණ ඇතුළත් කිරීම සහ නැතිවූ මොඩියුලයන් වෙනස් කිරීම සහ අවසානයේදී කෝණික 2 ඉක්මන් ආරම්භක උදාහරණයmain.ts මත පදනම්ව මගේ ආරම්භය වෙනස් කිරීම. ).

මම කළේ npm updateපසුවnpm outdatedස්ථාපනය කර ඇති අනුවාදයන් නිවැරදි බව සනාථ කිරීම සඳහා වාසනාව නැත.

මම node_modulesෆෝල්ඩරය මුළුමනින්ම පිස දමා නැවත ස්ථාපනය කළෙමි npm install- වොයිලා! ගැටළුව විසඳා ඇත.

මම මුලින්ම නිබන්ධනය කළ විට, 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);