访问的Angular2模板

我有一个角模板，使用得到传递给它的孩子里面QueryList长度：访问的Angular2模板

@ContentChildren(Item) QueryList<Item> items;

里面的模板，这些物品被放置在一个表中，首先在表头中使用以显示标题：

 <table class="table nomargin table-hover"> 
      <thead> 
      <tr> 
       <th *ngFor="let item of items" ngClass="{{item.classes}}">

...它按预期工作。虽然加载内容，我有一个加载GIF跨越所有显示加载GIF列，我想在items

这指定的列数这个加载GIF跨越是我到目前为止已经试过：

  <tbody> 
      <tr *ngIf="display.loading"> 
       <td class="text-center ajax-loader" [attr.colspan]="{{items?.toArray().length}}" > 
        <br /> 
        <img src="../img/ajax-loader-4.gif"/> 
        <br /> 
        <br /> 
        Loading ... 
        <br /> 
        <br /> 
       </td> 
      </tr>

，它与失败：

时出错加载文件：包：______ /组件/表component.ngfactory.dart

只要我删除[attr.colspan]="{{items?.toArray().length}}"，错误就会消失。 [attr.colspan]="{{items?.length}}"同样的错误。

items确实有length属性，因此可能不需要toArray。

在酒馆输出我看到：

[网络] GET 包/ ______ /组件/表component.ngfactory.dart→ 找不到资产 ______ | LIB /组件/表component.ngfactory.dart。

如果我只是colspan="{{items?.length}}"它只是被忽略。

我是否缺少一些指令？这是我目前有：

@View(
    directives: const [NgFor, NgIf, NgClass],

什么是利用items长度在一个angular2模板属性的正确方法？

来源

2016-06-11 Jan Vladimir Mostert

你是否检查'Item'组件实例被实例化的结果'* ngFor =”让项目的项目“'？ –

@View（）

@View()注释在beta.11除去已经。 https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta11-2016-03-18

只需将参数移动到@Component(...)。

PLATFORM_DIRECTIVES

如果添加

transformers: 
    - angular2/transform/codegen: 
     platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'

您pubspec.yaml那么你并不需要添加这些指令明确地

@View(
    directives: const [NgFor, NgIf, NgClass],`

[]和{{}}

[attr.colspan]="{{items?.length}}" []用于对象绑定，{{}}用于字符串绑定。两者在一起是无效的。

支持或者是

[attr.colspan]="items?.length"

或

attr.colspan="{{items?.length}}"

而第二分配的items?.length.toString()

来源

2016-06-11 19:56:38

这似乎解决了它： '[attr.colspan] =“items？.length”' 感谢您的变压器建议！ –

我应该为'{{}}'失败记录一个错误吗？没有它的作品100％ –

看到我更新的答案。这不应该工作。另请参阅https://github.com/angular/angular.io/blob/ff20b559755675544cb3a97c173c98697bf9ae80/public/docs/_examples/dependency-injection/dart/pubspec.yaml了解如何使管道在全球范围内可用。您还可以通过这种方式添加自己的指令和管道，以使其在全球范围内可用 –

访问的Angular2模板

回答

相关问题