由于'ngModel'不是已知的本地属性或已知指令，因此无法绑定。

Question

我正尝试学习Angular2dart，并遵循Angular2dart网站上的教程。

考虑以下代码：

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

我做错了什么？

- softshipper

---

在TypeScript中，有一个名为"module.ts"的文件，你应该添加import { FormsModule } from '@angular/forms';。在Dart中也应该有类似的东西。否则，如果你将它添加到组件的顶部，它也会起作用。 - Deblaton Jean-Philippe

Answer 1

看起来你在pubspec.yaml文件中缺少常用指令的转换器。

请检查https://github.com/angular-examples/toh-1/blob/master/pubspec.yaml，其中包含以下angular部分的转换器：

transformers:
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart

- Dafe Šimonek

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 {
}

- Stijn Van Bael

Answer 3

使用Dart 2.3.0并遵循教程。在您的组件中，需要添加directives: [formDirectives]，并导入import 'package:angular_forms/angular_forms.dart';。请保留HTML标签。

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

- osdn

---

我花了太长时间才找到这个答案。 - Ryan Haining