我正在尝试学习angular2dart并遵循anguar2dart site中的教程。
请考虑以下代码:
import 'package:angular2/core.dart';
class Hero {
final int id;
String name;
Hero(this.id, this.name);
}
@Component(
selector: 'my-app',
template: '''
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>'''
)
class AppComponent {
String title = 'Tour of Heroes';
Hero hero = new Hero(1, 'Windstorm');
}
当我编译它时,它会显示错误消息:
Build error:
Transform TemplateCompiler on Sample|lib/app_component.ng_meta.json threw error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known native property or known directive. Please fix typo or add to directives list. ("
<div>
<label>name: </label>
<input [ERROR ->][(ngModel)]="hero.name" placeholder="name">
</div>"): AppComponent@5:15
我做错了什么?
答案 0 :(得分:4)
您的pubspec.yaml文件中似乎缺少常见指令的变换器。
检查https://github.com/angular-examples/toh-1/blob/master/pubspec.yaml它包含以下变换器角度部分:
transformers:
- angular2:
platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: web/main.dart
答案 1 :(得分:3)
从Angular 4开始,platform_directives
消失了。
NgModel
现在是一个表单指令。您可以按如下方式包含表单指令:
import 'package:angular_forms/angular_forms.dart' as forms;
@Component(
selector: 'my-app',
directives: const[forms.formDirectives],
)
class AppComponent {
}
答案 2 :(得分:0)
使用dart 2.3.0并按照教程进行操作。有必要添加
directives: [formDirectives],
作为组件的一部分。并导入
import 'package:angular_forms/angular_forms.dart';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'hero.dart';
@Component(
selector: 'my-app',
template: '''
<h1>{{title}}</h1>
<h2>{{hero.name}}</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
''',
directives: [formDirectives],
)
class AppComponent {
final title = 'Tour of Heroes';
Hero hero = Hero(1, 'Windstorm');
}
幸运的是,只要Dart发布更新,就可以使用教程示例检查存储库: https://github.com/angular-examples/toh-1/blob/master/lib/app_component.dart