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">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

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

我尝试的事情

用'＆lt; ng-template ngFor ....＆gt;＆lt; / ng-template＆gt;'替换'* ngFor'语法 - 创建了一个未解决的。
使用dartdevc编译器

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

Answer 1

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

Answer 2

您错过了let关键字，这意味着＆＃34;让name成为ngFor结构指令赋予的内容，并使用此信息构建下面的模板＆＃34;

ngFor将为您提供names数组中的项目。

这更容易在结构指令的结构中看到。

<ng-template [ngForOf]="names" let-name>
  {{ name }}
</ng-template>

基本上，模板排序一个函数（它不是，但是一个很好的心智模型），name是一个参数。您可以根据参数编写模板的外观，并为您提供ngFor提供的参数。

这个＆＃34;论证＆＃34;被称为上下文，并且您没有指定上下文的名称这意味着您使用了隐式。 ngFor还为您提供其他＆＃34;参数＆＃34; （来自上下文的其他值），例如index或first。

<ng-template [ngForOf]="names" let-name let-i="index">
  {{ i }}. {{ name }}
</ng-template>

在这里，我们采用了命名上下文index并将其分配给变量i。然后我们在模板中使用i。这与具有参数名称i的函数类似，然后使用名为index的变量调用它。这是引擎盖背后发生的超简化版本。

function render(i) { return i }
for (let index = 0; index < 3; index++) {
  render(index)
}

* ng不适用于飞镖角（4）

2 个答案: