angular - 访问 Angular2 模板内 QueryList 的长度

Question

我有一个 Angular 模板，可以使用以下方法将子项传递给它:

@ContentChildren(Item) QueryList<Item> items;

在模板内部，这些项被放置在一个表格中，首先在表格头部用于显示标题:

        <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}}" [] 用于对象绑定(bind)，{{}} 用于字符串绑定(bind)。两者一起无效。

支持的是

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

或

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

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

的结果