angular - 在 Angular2 模板中访问 QueryList 的长度

Question

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

@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属性(property)所以 toArray可能不需要。

在 pub 输出中我看到:

[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],

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

Answer 1

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

只需将参数移至 @Component(...)反而。

平台指令

如果你添加

  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() 的结果