*不在省道角度下工作(4)

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

这是主要的。投掷:

import 'package:angular/angular.dart';

import 'package:angular4_basic/app_component.dart';

void main() {
  bootstrap(AppComponent);
}

<h1>The Beatles</h1>

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

和app_组件。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">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

... 然后是一个大而长的堆栈跟踪

• 将“*ngFor”替换为“<ng模板ngFor&燃气轮机</ng模板>'语法——它创建了一个未解析的。

• 使用dartdevc编译器