Question

使用Angular 2

当我这样做时：

<ul>
    <template *ngFor="let flag of [1,2,3,4]">
        <li  *ngIf="flag == 1">
            some data
        </li>
    </template>
</ul>

我明白了

<ul>
    <!--template bindings={
      "ng-reflect-ng-for-of": "1,2,3,4"
    }-->
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
</ul>

它什么都没显示。只有在<li>设置

时才需要在* ngFor中显示item.flagsExplain[flag]

Answer 1

语法糖

：

<ul>
    <ng-container*ngFor="let flag of service.flagsCount()">
        <li  *ngIf="item.flagsExplain[flag]">
            {{ service.flagLabel(flag) }}
            <b *ngIf="item.flagsExplain[flag] != 1">
                : {{ item.flagsExplain[flag] }}
            </b>
        </li>
    </ng-container>
</ul>

如果您想使用template代码，则需要使用此表单：

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

和Angular 4：

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>

因此您的代码将如下所示：

<ul>
    <template ngFor let-flag [ngForOf]="service.flagsCount()">
        <li  *ngIf="item.flagsExplain[flag]">
            some data
        </li>
    </template>
</ul>

p / s：在Angular 4中将template标记替换为ng-template。

此处记录：https://angular.io/docs/ts/latest/api/common/index/NgForOf-directive.html

不能使用* ngFor和* ngIf

1 个答案: