Angular2 ngFor - 如果没有值则跳过答案

【问题标题】：Angular2 ngFor - skip if no valueAngular2 ngFor - 如果没有值则跳过
【发布时间】：2016-06-28 14:41:57
【问题描述】：

我有这个 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>

【问题讨论】：

你能在模板中添加一个 *ngIf 吗？像 *ngIf="item.description" 之类的东西。
谢谢阿德里安。我想跳过 li 块，或者作为隐藏的第二个选项。
可以使用过滤管stackoverflow.com/questions/37827925/angular-2-filter-pipe/…

标签： angular

【解决方案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。

以工作Plunker为例使用

【讨论】：

像魅力一样工作。谢谢！
使用此语法时如何获取迭代项的索引？最初我使用的是这样的：<li *ngFor="let step of steps; let i = index">...</li>.
如果我使用 table 并且我在 row 上使用 ngFor 会怎样？
没有任何变化。 :D
不推荐使用 ng-template 代替，工作正常。并且没有人应该做常规 *ngFor = "let ..." 而不是按照答案中指定的方式使用

【解决方案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>

【讨论】：