在 Angular2 模板中访问 QueryList 的长度

Question

我有一个 Angular 模板，它使用 children 传递给它：

@ContentChildren(Item) QueryList<Item> items;

在模板中，这些项目被放置在table中，首先用于table头部显示headers：

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

... 按预期工作。在加载内容时，我有一个加载 gif 跨越显示加载 gif 的所有列，我希望此加载 gif 跨越 items

中指定的列数

这是我目前尝试过的方法：

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

它失败了：

An error occurred loading file: package:______/components/table-component.ngfactory.dart

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

的相同错误

items 确实有一个 length 属性所以可能不需要 toArray。

在我看到的发布输出中：

[web] GET packages/______/components/table-component.ngfactory.dart → Could not find asset ______|lib/components/table-component.ngfactory.dart.

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

我是不是漏掉了一些指令？这是我目前拥有的：

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

在 angular2 模板的属性中使用 items 长度的正确方法是什么？

Answer 1

@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()

的结果

在 Angular2 模板中访问 QueryList 的长度

Accessing the length of QueryList inside an Angular2 template

dart

angular-dart

angular