javascript - 'NgModel' এ বাঁধা যাবে না কারণ এটি 'ইনপুট' এর পরিচিত সম্পত্তি নয়
আমার অঙ্গুলি অ্যাপ্লিকেশনটি চালু করার সময় আমি নিম্নলিখিত ত্রুটি পেয়েছি, এমনকি যদি উপাদানটি প্রদর্শিত হয় না।
আমি আমার মন্তব্য কাজ করে যাতে মন্তব্য করতে হবে।
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>"): [email protected]: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";
} Angular 2 , 4 এবং 5+ এ [(ngModel)] ব্যবহার করার জন্য, আপনাকে Angular ফর্ম থেকে 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 { } এছাড়াও ফর্মস ngModel এ Angular4 ngModel জন্য বর্তমান শুরু করা মন্তব্যগুলি হল :
/**
* `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}"আরও তথ্যের জন্য, here Angular বিভাগে ng_model দেখুন
আপনাকে ফর্মস মডিউল আমদানি করতে হবে
খুলুন app.module.ts
এবং লাইন যোগ করুন
import { FormsModule } from '@angular/forms';এবং
@NgModule({
imports: [
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 { }আমি জানি এই প্রশ্নটি Angular 2 সম্পর্কে, কিন্তু আমি Angular 4 এ আছি এবং এই উত্তরগুলির কোনটিই সাহায্য করেনি।
Angular 4 সিনট্যাক্স হতে হবে
[(ngModel)]আশাকরি এটা সাহায্য করবে.
যদি কেউ গৃহীত সমাধানটি প্রয়োগ করার পরেও ত্রুটিগুলি পান তবে এটি সম্ভবত হতে পারে কারণ আপনি যে উপাদানটিতে ইনপুট ট্যাগে ngModel সম্পত্তিটি ব্যবহার করতে চান তার জন্য একটি পৃথক মডিউল ফাইল রয়েছে। সেই ক্ষেত্রে, উপাদানটির মডিউল.এস.এস ফাইলগুলিতে গৃহীত সমাধান প্রয়োগ করুন।
যদি ফরমস মডিউলটি সঠিকভাবে আমদানি করার পরেও ত্রুটিটি পান তবে আপনার টার্মিনালে বা (উইন্ডোজ কনসোল) চেক করুন কারণ আপনার প্রকল্পটি কম্পাইল হচ্ছে না (অন্য কোনও ত্রুটির কারণে যা হতে পারে) এবং আপনার সমাধানটি আপনার ব্রাউজারে প্রতিফলিত হয় নি!
আমার ক্ষেত্রে, আমার কনসোলে নিম্নলিখিত সম্পর্কিত ত্রুটি ছিল: সম্পত্তি 'পুনরুদ্ধার GithubUser' টাইপ 'ApiService' বিদ্যমান নেই।
কখনও কখনও আপনি এই ত্রুটিটি পান যখন আপনি একটি মডিউল থেকে একটি উপাদান ব্যবহার করার চেষ্টা করেন, যা কোনও মডিউলটিতে ভাগ করা হয় না।
উদাহরণস্বরূপ, আপনার মডিউল1.componentA.component.ts এবং module2.componentC.component.ts এর সাথে 2 মডিউল রয়েছে এবং আপনি মডিউল 2 এর ভিতরে একটি মডিউল মডিউল1.componentA.component.ts থেকে নির্বাচক ব্যবহার করার চেষ্টা করছেন (উদাহরণস্বরূপ <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> ), এটি ত্রুটিটি নিক্ষেপ করবে যে someInputVariableInModule1 মডিউল1.componentA.component.ts এর ভিতরে উপলব্ধ নেই - যদিও আপনার @Input() someInputVariableInModule1 তে কিছু ইনপুটভ্যারেবলইনএমডিয়াল 1 থাকে।
যদি এটি হয়, আপনি অন্যান্য মডিউলগুলিতে অ্যাক্সেসযোগ্য হতে module1.componentA ভাগ করতে চান। সুতরাং আপনি যদি ভাগ করা মডিউলটির মধ্যে module1.componentA ভাগ করেন, তবে module1.componentA অন্যান্য মডিউলগুলির ভিতরে (মডিউল 1 এর বাইরে) ব্যবহারযোগ্য হবে এবং ভাগ করা মডিউল আমদানি করা প্রতিটি মডিউল @ @Input() তাদের টেম্পলেটগুলিতে নির্বাচক অ্যাক্সেস করতে সক্ষম হবে। ঘোষণা পরিবর্তনশীল।
এটি টাইপ স্ক্রিপ্টের পরিবর্তে সাধারণ জাভাস্ক্রিপ্ট ব্যবহার করে এমন লোকদের জন্য। নীচের মত পৃষ্ঠার শীর্ষে ফর্ম স্ক্রিপ্ট ফাইল উল্লেখ করার পাশাপাশি
<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script> ng.forms.FormsModule লোড করার জন্য আপনাকে মডিউল ng.forms.FormsModule । পরিবর্তনগুলি করার পর আমার imports NgModule পদ্ধতির সম্পত্তি নীচের মতো লাগছিল
imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
শুভ কোডিং!
যখন আমি প্রথম টিউটোরিয়ালটি করলাম, তখন 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);ngModel ফর্মস মডিউল থেকে আসছে। কিছু ক্ষেত্রে আপনি যখন এই ধরনের ত্রুটি পেতে পারেন:
- আপনি আপনার উপাদান ঘোষণা করা হয় যেখানে মডিউল এর আমদানি অ্যারে মধ্যে ফর্মস মডিউল আমদানি না, উপাদান যা ngModel ব্যবহৃত হয়।
- আপনি ফর্মুল মডিউলটি একটি মডিউলে আমদানি করেছেন যা অন্য মডিউলে উত্তরাধিকারসূত্রে প্রাপ্ত। এই ক্ষেত্রে আপনার দুটি বিকল্প আছে:
- FormsModule উভয় মডিউল থেকে আমদানি অ্যারে আমদানি করা যাক: module1 এবং module2। নিয়ম হিসাবে: একটি মডিউল আমদানি করা তার আমদানি করা মডিউল অ্যাক্সেস প্রদান করে না। (আমদানি উত্তরাধিকারী হয় না)
- মডেল 2 এ আমদানি ও রপ্তানি অ্যারেগুলিতে ফর্মস মডিউল ঘোষণা করুন এটি মডেল 2 এ দেখতে সমর্পিত হতে
(কিছু সংস্করণে আমি এই সমস্যাটি মোকাবেলা করেছি) আপনি সঠিকভাবে ফর্মস মডিউল আমদানি করেছেন তবে সমস্যাটি HTML ট্যাগটিতে সমস্যা। আপনাকে অবশ্যই ইনপুটের জন্য নাম ট্যাগের বৈশিষ্ট্য যোগ করতে হবে এবং বস্তুর আবদ্ধ নামটি [(ngModel)] নামটির নাম হিসাবে একই হতে হবে
