Question

我有这个json对象：

data = {

  "name": "somename",
  "items": [
    {
      "title": "Item 1",
      "description": "Some description for item1"
    },
    {
      "title": "Item 2",
      ""
    },
    {
      "title": "Item 3",
      "description": "Some description for item3"
    }
  ]
}

使用rc2，* ngFor和仅显示具有描述的项目的推荐方法是什么？

Html模板：

<li *ngFor="let item of data.items" class="item">
        <div>{{item.title}}</div>
        <div>{{item.description}}</div>
</li>

Answer 1

在重复元素上添加*ngIf，并在length属性上使用falsy条件进行检查，如下所示：

<ul>
    <template ngFor let-item [ngForOf]="data.items">
        <li class="item" *ngIf="item?.description?.length">
            <div>{{item.title}}</div>
            <div>{{item.description}}</div>
        </li>
    </template>
</ul>

您无法访问同一元素item中*ngFor的{{1}}变量，这就是您需要添加封装{*ngIf标记的原因{ {1}}。

使用Plunker作为示例用法

Answer 2

<块引用>

只显示有描述的项目？

简短的解决方案

<ul *ngFor="let item of data.items">
    <li class="item" *ngIf="item.description">
        <div>{{item.title}}</div>
        <div>{{item.description}}</div>
    </li>
</ul>

或使用 ng-container 而不是 template 以保持代码更清晰。

<ul>
    <ng-container *ngFor="let item of data.items">
        <li class="item" *ngIf="item.description">
            <div>{{item.title}}</div>
            <div>{{item.description}}</div>
        </li>
    </ng-container>
</ul>

Angular2 ngFor - 如果没有值则跳过

2 个答案: