Angular 2 NgModel不起作用

Question

I'm starting my transition from Angular 1 to Angular 2. I tried to do simple things first so I wrote a component: 我开始从Angular 1转换到Angular 2.我尝试先做一些简单的事情，所以我写了一个组件：

import {Component} from 'angular2/core';
import {NgModel} from 'angular2/common';

@Component({
  selector: 'app',
  template: `
    <div>
    <div>Value is {{ value }}</div>
    <input type="text" [(ngModel)]="value" />
    </div>
  `,
  directives: [NgModel]
})
export class App {
  value: string;
};

<!DOCTYPE html>
<html>
  <head>
    <title>Angular2</title>
  </head>
  <body>
    <app></app>

    <script src="./js/bundle.js"></script>
  </body>
</html>

(bundle.js do only the bootstrapping of app component) （bundle.js只做app组件的引导）

I expect after I type something into the textbox, I should get the same text in the div . 我希望在我在文本框中输入内容之后，我应该在div获得相同的文本。 But it doesn't happen. 但它不会发生。

Why doesn't my code work? 为什么我的代码不起作用？

Regards, Sarun 问候，萨伦

UPDATE I assume I may configure my build system incorrectly, so I include my gulpfile.js , package.json and boot.ts . 更新我假设我可能错误地配置我的构建系统，所以我包括我的gulpfile.js ， package.json和boot.ts

gulpfile.js gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var tsify = require('tsify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('ts', function() {
  browserify({
    debug: true
  })
  .add('source/ts/boot.ts')
  .plugin(tsify)
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(uglify())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('build/js'));
});

gulp.task('watch', function() {
  gulp.watch('source/ts/**/*.ts', ['ts']);
});

package.json 的package.json

{
  "name": "hello-angular2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular2": "^2.0.0-beta.0",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.34.0",
    "reflect-metadata": "^0.1.2",
    "rxjs": "^5.0.0-beta.0",
    "zone.js": "^0.5.10"
  },
  "devDependencies": {
    "browserify": "^12.0.1",
    "gulp": "^3.9.0",
    "gulp-exec": "^2.1.2",
    "gulp-live-server": "0.0.29",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.1",
    "gulp-watch": "^4.3.5",
    "lite-server": "^1.3.2",
    "tsify": "^0.13.1",
    "typescript": "^1.7.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

boot.ts boot.ts

import 'reflect-metadata';
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';

bootstrap(App);

Answer 1

The problem is your import of ngModel isn't valid (or needed) take it out and it should run fine see here: 问题是您输入的ngModel无效（或需要）将其取出并且运行正常，请参见此处：

https://plnkr.co/edit/tGqtYOXpPp0qdDpUNrtZ?p=preview https://plnkr.co/edit/tGqtYOXpPp0qdDpUNrtZ?p=preview

Answer 2

After a long dig in to the docs and a long googling, I finally found the answer. 经过长时间的深入研究和漫长的谷歌搜索，我终于找到了答案。

(This answer may change in the future, refer to Angular Documentation) （这个答案将来可能会改变，请参阅Angular文档）

https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md

As @pixelbits mentioned, I missed a couple of dependencies rxjs and angular2-polyfills , the latter is a polyfill for two other dependencies zone.js and reflect-metadata and this must be included in a <script> tag only. 正如@pixelbits所提到的，我错过了几个依赖项rxjs和angular2-polyfills ，后者是另外两个依赖项zone.js和reflect-metadata zone.js ，它必须只包含在<script>标记中。

Things I need to do is: 我需要做的是：

Remove reflect-metadata import from boot.ts and add rxjs import to it. 从boot.ts删除reflect-metadata导入boot.ts其添加rxjs import。
Add a <script> tag for angular2-polyfills.js to index.html 将angular2-polyfills.js的<script>标记添加到index.html

And voila! 瞧！ It works as expected. 它按预期工作。

Thanks to @pixelbits, @Zyzle and @Günter Zöchbauer for helping me. 感谢@pixelbits，@ Zyzle和@GünterZöchbauer帮助我。

Answer 3

You need to add FORM_DIRECTIVES , NgModel is not enough. 你需要添加FORM_DIRECTIVES ， NgModel是不够的。 I get the error No value accessor for '' in [AST] when I only add NgModel (in Dart). 当我只添加NgModel （在Dart中）时，我No value accessor for '' in [AST]得到错误No value accessor for '' in [AST] 。 The example in the code documentation also uses FORM_DIRECTIVES 代码文档中的示例也使用FORM_DIRECTIVES

Angular 2 NgModel不起作用

问题描述

3 个解决方案

解决方案1
3 2016-01-03 15:54:26

解决方案2
2 已采纳 2016-01-03 17:58:52

解决方案3
0 2016-01-03 15:49:38

Angular 2 NgModel不起作用

问题描述

3 个解决方案

解决方案1 3 2016-01-03 15:54:26

解决方案2 2 已采纳 2016-01-03 17:58:52

解决方案3 0 2016-01-03 15:49:38

解决方案1
3 2016-01-03 15:54:26

解决方案2
2 已采纳 2016-01-03 17:58:52

解决方案3
0 2016-01-03 15:49:38