无法绑定到'ngModel'，因为它不是已知的本机属性或已知指令

Question

我正在尝试学习angular2dart并遵循anguar2dart网站的教程。

考虑以下代码：

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

我究竟做错了什么？

Answer 1

您的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

Answer 2

从Angular 4开始， platform_directives就不见了。

NgModel现在是一个表单指令。 您可以包含表单指令，如下所示：

import 'package:angular_forms/angular_forms.dart' as forms;

@Component(
    selector: 'my-app',
    directives: const[forms.formDirectives],
)
class AppComponent {
}

Answer 3

使用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');
}

请使用教程示例检查repo，幸运的是，只要Dart发布更新，就会更新： https ： //github.com/angular-examples/toh-1/blob/master/lib/app_component.dart