এনজিওমোডেল ব্যবহার করে কৌণিক 2 দ্বি উপায় বাঁধাই কাজ করছে না

Question

'এনজিমোডেল'-এ আবদ্ধ হতে পারে না কেননা এটি' ইনপুট 'উপাদানটির জ্ঞাত সম্পত্তি নয় এবং এর সাথে সম্পর্কিত কোনও সম্পত্তির কোনও নির্দেশনা নেই are

দ্রষ্টব্য: আমি আলফা ৩৩১ ব্যবহার করছি

import { Component, View, bootstrap } from 'angular2/angular2'

@Component({
    selector: 'data-bind'
})
@View({
    template:`
        <input id="name" type="text" 
            [ng-model]="name" 
            (ng-model)="name = $event" />
        {{ name }}
    ` 
})
class DataBinding { 
    name: string;

    constructor(){
        this.name = 'Jose';
    }
}

bootstrap(DataBinding);

Answer 1

অ্যাঙ্গুলার 15 সেপ্টেম্বর এর চূড়ান্ত সংস্করণ প্রকাশ করেছে। অ্যাঙ্গুলার 1 এর বিপরীতে আপনি ngModelদ্বি-উপাত্তের ডেটা বাইন্ডিংয়ের জন্য কৌণিক 2 তে নির্দেশিকা ব্যবহার করতে পারেন , তবে আপনাকে এটি কিছুটা ভিন্নভাবে লিখতে হবে [(ngModel)]( একটি বাক্স সিনট্যাক্সে কলা )। kebab-caseআপনার ব্যবহার করা উচিত পরিবর্তে প্রায় সমস্ত কৌণিক 2 মূল নির্দেশাবলী এখন সমর্থন করে না camelCase।

এখন ngModelডিরেক্টিভের জন্যে FormsModule, কেন যে আপনি উচিত থেকে ভিতরে মডিউল মেটাডেটা বিকল্প (NgModule)। এরপরে আপনি নিজের পৃষ্ঠায় নির্দেশিকা ব্যবহার করতে পারেন ।importFormsModule@angular/formsimportsAppModulengModel

app / app.componal.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
    <input type="text" [(ngModel)]="myModel"/>
    {{myModel}}
  `
})
export class AppComponent { 
  myModel: any;
}

app / app.module.ts

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

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

export class AppModule { }

app / main.ts

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

ডেমো প্লঙ্কার

Answer 2

গুরুত্বপূর্ণ দিক:

1. কৌণিক 2 তে এনজিমোডেল কেবল তখনই কার্যকর হয় যদি ফর্মসমডুল আপনার অ্যাপমোডিয়ুলের অংশ হিসাবে উপলব্ধ।

2. ng-model সিনট্যাটিকভাবে ভুল

3. বর্গাকার ধনুর্বন্ধনী [..] সম্পত্তি বাঁধাই বোঝায়।
4. চেনাশোনা বন্ধনী (..) ইভেন্ট বাঁধাই বোঝায়।
5. যখন বর্গক্ষেত্র এবং বৃত্তীয় বন্ধনীগুলি একসাথে রাখা হয় [[..)] দুটি উপায় বাঁধাই বোঝায়, সাধারণত কলা বাক্স বলে।

সুতরাং, আপনার ত্রুটি ঠিক করতে।

পদক্ষেপ 1: ফর্মমোডুল আমদানি করা

import {FormsModule} from '@angular/forms'

পদক্ষেপ 2: এটি আপনার অ্যাপমোডুলির অ্যারে আমদানিতে যুক্ত করুন

imports :[ ... , FormsModule ]

পদক্ষেপ 3:ng-model কলা বাক্সগুলির সাথে এনজিএমডেল হিসাবে পরিবর্তন করুন

 <input id="name" type="text" [(ngModel)]="name" />

দ্রষ্টব্য: এছাড়াও, আপনি নীচের পাশাপাশি পৃথকভাবে দুটি উপায়ে ডেটাবেন্ডিং পরিচালনা করতে পারেন

<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/>

valueChange(value){

}

Answer 3

আমার ক্ষেত্রে, আমি আমার ইনপুট উপাদানটিতে একটি "নাম" বৈশিষ্ট্য অনুপস্থিত ছিল।

Answer 4

Angular2 ফাইনাল অনুসারে, আপনাকে FORM_DIRECTIVESঅনেকের দ্বারা উপরে প্রস্তাবিত হিসাবে আমদানি করতে হবে না । তবে কাবাব-কেস বাদ দেওয়ার সাথে সাথে সিনট্যাক্সটি পরিবর্তন করা হয়েছে উন্নতির জন্য ।

কেবল এটির ng-modelসাথে প্রতিস্থাপন করুন ngModelএবং এটি একটি কলা বাক্সে মুড়ে দিন । তবে আপনি কোডটি এখন দুটি ফাইলে ছড়িয়ে দিয়েছেন:

app.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'ng-app',
  template: `
    <input id="name" type="text" [(ngModel)]="name"  />
    {{ name }}
  `
})
export class DataBindingComponent {
  name: string;

  constructor() {
    this.name = 'Jose';
  }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DataBindingComponent } from './app'; //app.ts above

@NgModule({
  declarations: [DataBindingComponent],
  imports:      [BrowserModule, FormsModule],
  bootstrap:    [DataBindingComponent]
})
export default class MyAppModule {}

platformBrowserDynamic().bootstrapModule(MyAppModule);

Answer 5

যে উত্তরটি আমাকে সাহায্য করেছিল: নির্দেশিকা [(এনজিএমডেল)] আরসি 5 তে আর কাজ করছে না

এটি সংক্ষেপে: ইনপুট ক্ষেত্রগুলিতে এখন nameফর্মটিতে সম্পত্তি প্রয়োজন ।

Comments

হ্যাঁ, আমারও একই সমস্যা ছিল। আমি

— ইনপুটটিতে

আসল হেক কি? কেন এটি এমনকি সেই বৈশিষ্ট্যটির প্রয়োজন নেই? এটি আমার জন্য সবচেয়ে অপ্রত্যাশিত সমাধান ছিল।

— নিকা কসরাদজে

Answer 6

App.module.ts এ

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

পরে @ এনজিএমডিউল ডেকরেটারের আমদানিতে:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Answer 7

কৌণিক 2 বিটা

এই উত্তরটি তাদের জন্য যারা জাভাস্ক্রিপ্ট ব্যবহার করেন কৌণিক জেএস v.2.0 বিটার জন্য ।

ngModelআপনার দৃষ্টিতে ব্যবহার করার জন্য আপনাকে কৌণিকের সংকলকটি বলতে হবে যে আপনি ডাকা নির্দেশনা ব্যবহার করছেনngModel ।

কীভাবে?

ngModelকৌণিক 2 বিটাতে দুটি লাইব্রেরি ব্যবহার করার জন্য , এবং সেগুলি হয় ng.common.FORM_DIRECTIVESএবংng.common.NgModel ।

প্রকৃতপক্ষে ng.common.FORM_DIRECTIVESনির্দেশাবলীর গোষ্ঠী ব্যতীত কিছুই নয় যা আপনি যখন কোনও ফর্ম তৈরি করার সময় কার্যকর হয়। এটি NgModelনির্দেশিকাও অন্তর্ভুক্ত ।

app.myApp = ng.core.Component({
    selector: 'my-app',
    templateUrl: 'App/Pages/myApp.html',
    directives: [ng.common.NgModel] // specify all your directives here
}).Class({
    constructor: function () {
        this.myVar = {};
        this.myVar.text = "Testing";
    },

});

Comments

এফওয়াইআই এনজিএমডেল ফর্ম_আইডিআরেক্টিভেতে থাকে, তাই আপনিও এই নির্দেশনাগুলি করতে পারেন: [ng.common.FORM_DIRECTIVES]

— পিটার জে হার্ট

@ পিটারজে.হার্ট, প্রকৃতপক্ষে ng.common.NgModelনির্দেশের জন্য সংজ্ঞা রয়েছে ngModel। ফর্মগুলি যদি কার্যকর হয় সেগুলি ng.common.FORM_DIRECTIVESসহ কয়েকটি নির্দেশকে গোষ্ঠীবদ্ধ ngModelকরছে। সুতরাং আমরা ফর্মের প্রতিটি নির্দেশকে কেবল অন্তর্ভুক্ত করতে চাই নাng.common.FORM_DIRECTIVES

— অভিলাশ অগাস্টিন

Answer 8

এনজি-মডেলের পরিবর্তে আপনি এই কোডটি ব্যবহার করতে পারেন:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input #box (keyup)="0">
    <p>{{box.value}}</p>`,
})
export class AppComponent  {}

আপনার app.componal.ts এর ভিতরে

Answer 9

নিম্নলিখিত ফাইলগুলিতে কোড নীচে যুক্ত করুন।

app.componal.ts

<input type="text" [(ngModel)]="fname" >
{{fname}}
export class appcomponent {
fname:any;
}

app.module.ts

import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ]
})

আশাকরি এটা সাহায্য করবে

Answer 10

আপনার AppModule এ দ্বিমুখী বাইন্ডিংয়ের সাথে কাজ করার জন্য ফর্মমোডুল আমদানি করুন [(এনজি মডেল)] আপনার সাথে

Comments

সম্ভব হলে, কেবল কোডের পরিবর্তে অতিরিক্ত ব্যাখ্যা দেওয়ার জন্য চেষ্টা করুন। এগুলির উত্তরগুলি আরও কার্যকর হতে পারে কারণ তারা সম্প্রদায়ের সদস্যদের এবং বিশেষত নতুন বিকাশকারীদের সমাধানের যুক্তি আরও ভালভাবে বুঝতে সহায়তা করে এবং ফলো-আপ প্রশ্নগুলির সমাধানের প্রয়োজনীয়তা রোধ করতে সহায়তা করে।

— রাজন