问题 Angular2 ngFor - 如果没有值则跳过

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

4425

2018-06-28 14:41

起源

你可以在模板中添加* ngIf吗？像* ngIf =“item.description”之类的东西。 - Adrian Fâciu

谢谢阿德里安。我想跳过，或作为隐藏的第二选项，li块。 - Pat M

您可以使用过滤管道 stackoverflow.com/questions/37827925/angular-2-filter-pipe/... - Günter Zöchbauer

答案:

添加一个 *ngIf 在重复元素和检查与falsy条件 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>

你无法访问 item 变量来自 *ngFor 在里面 *ngIf 在同一个元素上，这就是你需要添加一个 template 标记封装 li。

加工 Plunker 例如用法

2018-06-28 14:46

奇迹般有效。谢谢！ - Pat M

使用此语法时如何获取迭代项的索引？最初我使用过这样的东西： <li *ngFor="let step of steps; let i = index">...</li>。 - kub1x

应该合作 let-i="index"！ - rinukkusu

如果我使用表并且在行上使用ngFor怎么办？ - TeodorKolev

不推荐使用ng-template代替，工作正常。没有人应该定期* ngFor =“let ...”而是按照答案中的规定使用 - Theophilus Omoregbee

热门问题

不使用eval / new函数的JavaScript模板库当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部受密码保护的.NET ClickOnce部署？如何用postgresql安装wordpress coq Set或Type如何成为命题硒滚动元素进入（中心）视图在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？如何通过语言文化获取代码页？