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

使用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中*ngIf在相同的元素,这就是为什么你需要添加一个template标签封装li.

工作Plunker例如用法