角2双向使用NG-模型绑定不工作 [英] Angular 2 two way binding using ng-model is not working

问题描述

无法绑定到'ngModel'，因为它不是'输入'元素的专有财产，有一个相应的属性没有匹配的指令

请注意：使用alpha.31 IM

 进口{组件，查看，引导}从'angular2 / angular2@零件（{
    选择：数据绑定
}）
@视图（{
    模板：`
        ＆LT;输入ID =名称类型=文本
            [NG模型] =名
            （NG-模式）=NAME = $事件/＆GT;
        {{ 名称 }}
    `
}）
类数据绑定{
    名称：字符串;    构造函数（）{
        this.name ='何';
    }
}引导（数据绑定）;
 

解决方案

每角测试版更新2.0.6

角已经发布beta版本最近角测试版 2.0.1 版本。其中有翻天覆地的变化。现在Angular2提供了 ngModel 指令为双向绑定，角1，但你需要它写在有点不同的方式，比如 [（ngModel）] （香蕉在一个盒子里的语法）。现在访问 ngModel 指令不需要加入 formDirectives 从 angular2 /表格，组件和查看已被移动到 angular2 /芯模块和放大器; 引导已被移动到 angular2 /平台/浏览器模块。现在angular2指令不支持烤肉情况而是使用 cammelCase

在角alpha.39版本中，您不需要使用 @View 注释。

看看下面code。

code

 进口{}组件从angular2 /核心;
从angular2 /平台/浏览器的进口{}引导;//注释部分
@零件（{
    选择：数据绑定，
    模板：'＆LT;输入[（ngModel）] =名/＆GT;＆LT; BR＆GT;我的名字{{名}}'
}）
//组件控制器
出口类DataBindingComponent {
  名称：字符串;
  构造函数（）{
    this.name ='潘卡';
  }
}引导（数据绑定）;
 

演示Plunkr

Angular2老code不是与Beta版

较早的答案（当Angular2是alpha版本）

  

为什么导入formDirectives？

  
  

我们有兴趣想 NG-模型指令为双向绑定，所以
  如果你看到的 angular2 code，你会知道它有
  各相关指令，其中 NgModel 也有

下面是 formDirectives 模块

上的所有指令

  

NgControlName ， NgControlGroup ， NgFormControl ， NgModel ，
   NgFormModel ， NgForm ， NgSelectOption ， DefaultValueAccessor ​​，
   CheckboxControlValueAccessor ​​， SelectControlValueAccessor ​​，
   NgRequiredValidator

您需要导入 formDirectives 从 angular2 /表格使用进口{formDirectives} angular2 /表格'; 来实现双向绑定。

最初angular2不具有双向绑定功能，现在他们已经添加了 NG-模型糖实现双向绑定。

 ＆LT;输入[（NG-模式）] =名称＆GT;
 

下面括号中使用（[..]）暗示属性绑定和圆形括号（（..））事件绑定。基本上，当你使用 NG-模型，要启用两者绑定 NG-模型更是一个事件。

在内部anglular2创建一个可观察的事件（与 EventEmitter ）来跟踪在绑定元素变化值分别更新绑定属性。

简单NgModel指令实施

  @Directive（{
  选择：[NG模型]'，
  性质：['ngModel']，
  事件：['ngModelChanged：ngModel']，
  主持人：{
    [值]：ngModel'，
    （输入）：ngModelChanged.next（$ event.target.value）
  }
}）
类NgModelDirective {
  ngModel：任; //储值
  ngModelChanged：EventEmitter; //事件发射器
}
 

以上已经从 好文章之一 上Angular2

更新code

 进口{组件，查看，引导}从'angular2 / angular2';
从angular2 /表格进口{formDirectives};
//注释部分
@零件（{
    选择：数据绑定
}）@景（{
  模板：'＆LT;输入[NG模型] =名称（NG-模式）=NAME = $事件＆GT;＆LT; /输入＆GT; {{名称}}'，
  指令：[formDirectives]
}）
//组件控制器
出口类数据绑定{//在上课前需要出口
  名称：字符串;
  构造函数（）{
    this.name ='何';
  }
}引导（数据绑定）;
 

工作Plunkr

Can't bind to 'ngModel' since it isn't a know property of the 'input' element and there are no matching directives with a corresponding property

Note: im using 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);

解决方案

Update per Angular Beta 2.0.6

Angular has released beta version recently Angular Beta 2.0.1 version. Which has enormous changes. Now Angular2 has provided ngModel directive for two way binding as Angular 1 does, but you need write it in bit different way like [(ngModel)](Banana in a box syntax). Now for accessing ngModel directive you don't need to add formDirectives from angular2/forms, Component and View has been moved to angular2/core module & bootstrap has been moved to angular2/platform/browser module. Now angular2 directive doesn't support kebab-case instead they use cammelCase

After angular alpha.39 release you don't need to use @View annotation.

Look at below code.

Code

import { Component} from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';

// Annotation section
@Component({
    selector: 'data-bind',
    template: '<input [(ngModel)]="name"/><br> My name {{name}}'
})
// Component controller
export class DataBindingComponent {
  name: string;
  constructor() {
    this.name = 'Pankaj';
  }
}

bootstrap(DataBinding);

Demo Plunkr

Angular2 old code is not with Beta version

Older Answer(when Angular2 was in alpha version)

Why to import formDirectives?

We are interested to want ng-model directive for two way binding, so if you see the angular2 code you will come to know that it has various for related directive in which NgModel is also there

Below are the all directives on formDirectives module

NgControlName, NgControlGroup, NgFormControl, NgModel, NgFormModel, NgForm, NgSelectOption, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, NgRequiredValidator

You need to import formDirectives from angular2/forms using import {formDirectives} from 'angular2/forms'; to achieve two way binding.

Initially angular2 doesn't have an two way binding feature, now they have added ng-model sugar to achieve two way binding.

<input [(ng-model)]="name">

Here usage of square brackets ([..]) suggests the property binding and round brackets ((..)) for event binding. Basically when you use ng-model, you are enabling both the bindings ng-model is more of an event.

Internally anglular2 creates an observable event(with EventEmitter) to track the value changes in the bound element and update the bound property respectively.

Simple NgModel Directive Implementation

@Directive({
  selector: '[ng-model]',
  properties: ['ngModel'],
  events: ['ngModelChanged: ngModel'],
  host: {
    "[value]": 'ngModel',
    "(input)": "ngModelChanged.next($event.target.value)"
  }
})
class NgModelDirective {
  ngModel:any; // stored value
  ngModelChanged:EventEmitter; // an event emitter
}

Above has been found from one of the good article on Angular2

Updated Code

import { Component, View, bootstrap } from 'angular2/angular2';
import {formDirectives} from 'angular2/forms';
// Annotation section
@Component({
    selector: 'data-bind'
})@ View({
  template: '<input [ng-model]="name" (ng-model)="name=$event"></input> {{name}}',
  directives: [formDirectives]
})
// Component controller
export class DataBinding { //export is needed before class
  name: string;
  constructor() {
    this.name = 'Jose';
  }
}

bootstrap(DataBinding);

Working Plunkr

这篇关于角2双向使用NG-模型绑定不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！