2017-09-01 75 views
0

我创建了一个超级基础项目使用最新的阶段来验证这一点。* ngFor未在镖角(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 protected]> 

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

...其次是大长堆栈跟踪

事情我试过

  • 更换 '* ngFor' 与'< ng-template ngFor ....> </ng-template>'语法 - 创建了一个未解决的问题。

  • 使用dartdevc编译

所以,我错过什么,在这里?

+0

如果你什么'* ngFor = “让名字的名字”',每[文件](HTTPS://webdev.dartlang .ORG /角度/导向/显示数据#!#表示-A-列表属性与 - ngfor)?那么根模块是什么样子? – jonrsharpe

+0

Dangit。我的不好,但不是,那不能解决它。 '根模块',你的意思是'main.dart'?我将它添加到原始文章(并修复了'let'kw。) – rickb

+0

将NgFor添加到指令列表时会发生什么? IIRC不再有任何魔术COMMON_DIRECTIVES,你必须包括NgFor,NgIf你自己。 –

回答

3

下一个加入NgFor或CORE_DIRECTIVES在你的指令列表materialDirectives

+0

这样做!老兄,我一直在网上爬行,试图找到答案。你会认为在这个地方会有更多的笔记。 Thx。 – rickb

0

您错过了let关键字,这意味着“让name成为ngFor结构指令给出的内容,并使用此信息在下面构建模板”。

什么ngFor会给你从names阵列的项目。

这在结构指令的去除形式中更容易看出。

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

基本上,模板是排序函数(它不是,而是一个很好的心智模式),并且name一种说法。您根据参数编写模板的外观,ngFor为您提供参数。

这个“说法”被称为背景,而事实上,你没有指定上下文的名称意味着你已经使用了之一。 ngFor也为您提供其他“参数”(来自上下文的其他值),例如indexfirst

<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) 
} 
+0

添加'let'关键字(我的坏)不能解决它。查看上面的更改。谢谢。 – rickb

+0

看起来你似乎缺少来自'common'包的指令。我不使用Dart,所以我不知道如何导入它的具体细节。但是使用包含'* ngFor'的模板的模块需要导入公共模块。 –

+0

这也是我的想法 - 但在Dart中,'common'包在angular4中似乎并不可用(无论如何它都不能在IDE中解析...) 我认为'common'可能已经在a4中折叠成'核心'了? 试图强制它不能解决问题(并且没有找到'common') – rickb