*ng 不能在 dart angular(4) 中工作

Question

我使用最新的 stagehand 创建了一个超级基础项目来验证这一点。

pubspec 看起来像这样：

name: angular4_basic
description: A web app that uses AngularDart Components
version: 0.0.1
#homepage: https://www.example.com
#author: Rick Berger <email@example.com>

environment:
  sdk: '>=1.24.0 <2.0.0'

dependencies:
  angular: ^4.0.0
  angular_components: ^0.6.0

dev_dependencies:
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1

transformers:
- angular:
    entry_points:
      - web/main.dart
- dart_to_js_script_rewriter

这是 main.dart：

import 'package:angular/angular.dart';

import 'package:angular4_basic/app_component.dart';

void main() {
  bootstrap(AppComponent);
}

app_component.html 看起来像这样：

<h1>The Beatles</h1>

<ul>
  <li *ngFor="let name of names">{{name}}</li>
</ul>

app_component.dart 看起来像这样：

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [materialDirectives],
  providers: const [materialProviders],
)
class AppComponent {
  List<String> names = <String>['George', 'Paul', 'Ringo', 'John'];
}

我收到以下错误：

*ngFor="let name of names"
^^^^^^^^^^^^^^^^^^^^^^^^^^
line 4, column 3 of AppComponent: ParseErrorLevel.FATAL: Property binding ngForOf not used by any directive on an embedded template
<li *ngFor="let name of names">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

...接着是一个很长的堆栈跟踪

我尝试过的事情

• 用 '<ng-template ngFor....></ng-template>' 语法替换 '*ngFor' - 这会产生一个未解决的问题。

• 使用 dartdevc 编译器

那么，我在这里错过了什么？

Answer 1

在 materialDirectives 旁边的指令列表中添加 NgFor 或 CORE_DIRECTIVES