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>

它失败了：

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

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

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

在酒吧输出中，我看到了：

[网页] GET packages / ______ / components / table-component.ngfactory.dart→ 找不到资产 ______ |。LIB /组件/表component.ngfactory.dart

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

我错过了一些指令吗？这就是我目前所拥有的：

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

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

Answer 1

<强> @View（）

已经在beta.11中删除了

@View()注释。 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的长度

1 个答案: