Angular2 ngFor - 如果没有值则跳过

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"
    }
  ]
}

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

HTML 模板:

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

Answer 1

在重复元素上添加一个 *ngIf 并检查 length 属性的虚假条件，如下所示:

<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>

您不能从同一元素上的 *ngIf 中的 *ngFor 访问 item 变量，这就是为什么您需要添加一个 template 标签封装 li.

---

Working Plunker for example usage