data binding - الزاوي 2 الربط باستخدام ngModel لا يعمل




data-binding typescript (6)

لا يمكن الارتباط بـ "ngModel" نظرًا لأنه ليس خاصية معروفة لعنصر "الإدخال" ولا توجد توجيهات مطابقة مع خاصية مقابلة

ملاحظة: أنا باستخدام alpha.31

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);

أصدرت Angular نسختها النهائية في 15 سبتمبر. بخلاف Angular 1 ، يمكنك استخدام توجيه ngModel في Angular 2 لربط البيانات في اتجاهين ، لكنك تحتاج إلى كتابتها بطريقة مختلفة بعض الشيء مثل [(ngModel)] ( Banana في صيغة مربع ). تقريبا جميع التوجيهات الأساسية الزاوي 2 لا تدعم kebab-case الآن بدلا من ذلك يجب عليك استخدام camelCase .

الآن ينتمي توجيه ngModel إلى FormsModule ، ولهذا السبب يجب عليك import FormsModule من @angular/forms الوحدة النمطية داخل خيار بيانات التعريف imports من AppModule (NgModule). بعد ذلك يمكنك استخدام توجيه ngModel بالداخل على صفحتك.

التطبيق / app.component.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.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 { }

التطبيق / main.ts

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

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

تجريبي Plunkr


إضافة رمز أدناه إلى الملفات التالية.

app.component.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 ]
})

أتمنى أن يساعدك هذا


بدلاً من طراز ng ، يمكنك استخدام هذا الرمز:

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

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

داخل app.component.ts الخاص بك


في app.module.ts

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

في وقت لاحق في استيرادNgModule decorator:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

الزاوي 2 بيتا

هذه الإجابة مخصصة لأولئك الذين يستخدمون Javascript for angularJS v.2.0 Beta.

لاستخدام ngModel في طريقة العرض الخاصة بك ، يجب أن تخبر المترجم الزاوي أنك تستخدم توجيهًا يسمى ngModel .

كيف؟

لاستخدام ngModel يوجد مكتبتان في الإصدار التجريبي angular2 ، وهما 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";
    },

});

النقاط الرئيسية:

  1. يكون ngModel in angular2 صالحًا فقط إذا كان FormsModule متاحًا كجزء من AppModule الخاص بك.

  2. ng-model خاطئ syntatically.

  3. تشير الأقواس المربعة [..] إلى خاصية الربط.
  4. تشير أقواس الدائرة (..) إلى ربط الحدث.
  5. عندما يتم وضع الأقواس المربعة والدائرية معًا ، تشير [(..)] إلى رابط ثنائي الاتجاه ، يُطلق عليه عادةً مربع الموز.

لذلك ، لإصلاح الخطأ الخاص بك.

الخطوة 1: استيراد FormsModule

import {FormsModule} from '@angular/forms'

الخطوة 2: إضافته إلى مجموعة من الواردات AppModule الخاص بك كما

imports :[ ... , FormsModule ]

الخطوة 3: قم بتغيير ng-model كـ ngModel باستخدام مربعات الموز

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

ملاحظة: يمكنك أيضًا التعامل مع ربط البيانات ثنائي الاتجاه بشكل منفصل وكذلك أدناه

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

valueChange(value){

}






2-way-object-databinding