訪問的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模板

回答

相關問題