Angular 2 NgModel 不工作
Angular 2 NgModel doesn't work
我正在开始从 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 仅对 app
组件进行引导)
我希望在文本框中键入内容后,我应该在 div
中得到相同的文本。但这并没有发生。
为什么我的代码不起作用?
此致,
萨伦
UPDATE 我想我可能会错误地配置我的构建系统,所以我包括我的 gulpfile.js
、package.json
和 boot.ts
.
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
{
"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
import 'reflect-metadata';
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
bootstrap(App);
您需要添加FORM_DIRECTIVES
,NgModel
是不够的。
当我只添加 NgModel
(在 Dart 中)时,我得到错误 No value accessor for '' in [AST]
。
example in the code documentation 也使用 FORM_DIRECTIVES
问题是您导入的 ngModel
无效(或不需要)将其取出,应该 运行 可以看到这里:
在深入研究文档和谷歌搜索之后,我终于找到了答案。
(这个答案以后可能会变,参考Angular文档)
https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md
正如@pixelbits 提到的,我错过了几个依赖项 rxjs
和 angular2-polyfills
,后者是另外两个依赖项 zone.js
和 reflect-metadata
的 polyfill,这个必须仅包含在 <script>
标记中。
我需要做的事情是:
- 从
boot.ts
中删除 reflect-metadata
导入并添加 rxjs
导入。
- 为
angular2-polyfills.js
添加一个 <script>
标签到 index.html
瞧!它按预期工作。
感谢@pixelbits、@Zyzle 和@Günter Zöchbauer 对我的帮助。
我正在开始从 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 仅对 app
组件进行引导)
我希望在文本框中键入内容后,我应该在 div
中得到相同的文本。但这并没有发生。
为什么我的代码不起作用?
此致, 萨伦
UPDATE 我想我可能会错误地配置我的构建系统,所以我包括我的 gulpfile.js
、package.json
和 boot.ts
.
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
{
"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
import 'reflect-metadata';
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
bootstrap(App);
您需要添加FORM_DIRECTIVES
,NgModel
是不够的。
当我只添加 NgModel
(在 Dart 中)时,我得到错误 No value accessor for '' in [AST]
。
example in the code documentation 也使用 FORM_DIRECTIVES
问题是您导入的 ngModel
无效(或不需要)将其取出,应该 运行 可以看到这里:
在深入研究文档和谷歌搜索之后,我终于找到了答案。
(这个答案以后可能会变,参考Angular文档)
https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md
正如@pixelbits 提到的,我错过了几个依赖项 rxjs
和 angular2-polyfills
,后者是另外两个依赖项 zone.js
和 reflect-metadata
的 polyfill,这个必须仅包含在 <script>
标记中。
我需要做的事情是:
- 从
boot.ts
中删除reflect-metadata
导入并添加rxjs
导入。 - 为
angular2-polyfills.js
添加一个<script>
标签到index.html
瞧!它按预期工作。
感谢@pixelbits、@Zyzle 和@Günter Zöchbauer 对我的帮助。