Angular v2不支持同一元素上使用多个结构指令。
  一种解决方法,使用<ng-container>,允许为每个结构指令使用单独元素的元素,但不会将其标记为DOM。

<ng-container *ngIf="show">
<div *ngFor="let thing of stuff">
{{log(thing)}}
<span>{{thing.name}}</span>
</div>
</ng-container>

  

另外一段示例代码

<ul>
<ng-container *ngFor="let item of lists">
<div class="thumb p-date" *ngIf="item.picurl">
<a href="# "><img src="{{item.picurl}} " alt=" " style="width:79px;height: 70px; "></a>
</div>
</ng-container>
</ul>

ngIf和ngFor共用的更多相关文章

  1. Angular2学习笔记——NgModule

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...

  2. Angular2笔记:NgModule

    Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Dire ...

  3. Angular2 指令

      1. 指令说明 Angular2 指令是构成Angular2应用程序的重要组成部分,指令主要用来对模板的标签或者元素附加一些新的特性或者功能,改变一个 DOM 元素的外观或行为,Angular2指 ...

  4. Angular 2.0 从0到1 (四)

    第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...

  5. Angular2经典文章集锦

    Angular Metadata 等基础知识 http://www.jianshu.com/p/aeb11061b82c Metadata告诉Angular如何处理一个类,只有我们将它通告给Angul ...

  6. Angular学习笔记(2)——TODO小应用

    Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法 ...

  7. Angular2 - Starter - Routes, Route Resolver

    在基于Angualr的SPA中,路由是一个很重要的部分,它帮助我们更方便的实现页面上区域的内容的动态加载,不同tab的切换,同时及时更新浏览器地址栏的URN,使浏览器回退和前进能导航到历史访问的页面. ...

  8. Angular2的模块架构浅谈

    引言angular2相比1引入了更完善的模块系统,回忆ng1的应用中通常在页面的html标签或body标签中添加ng-app节点,值为应用的模块名,整个应用都将围绕这个模块来展开,到了ng2,模块概念 ...

  9. Angular4.0.0正式版发布

    来源于angular4.0.0发布时的公告,译者:niithub 原文发布时间:Thursday, March 23, 2017 翻译时间:2017年3月24日 angular4.0.0正式版现在可以 ...

随机推荐

  1. 如何新建oracle数据库,图文流程。

    系统环境:Windows server 2008 R2 企业版 SP1 软件版本:oracle 11g  win64位 默认oracle 11g 安装配置完成,我们该如何创建数据库? 我们就介绍最基本 ...

  2. 安装部署redis3.2 phpRedisAdmin 攻略

    1.下载redis3.2稳定版本: 下载地址:  https://redis.io/download 2.安装: 解压文件后,进行文件夹: 执行以下命令: make cd src make insta ...

  3. hdu2609 How many 字典树+最小表示法

    Give you n ( n < 10000) necklaces ,the length of necklace will not large than 100,tell meHow many ...

  4. (惊艳)hashmap的理解(映射)

    第一: hashmap在内存中是长这样的,数组+链表的形式 // HashMap采用链表法解决冲突,每一个Entry本质上是一个单向链表 transient Entry[] table; 第二:  p ...

  5. centos7.0之vsftpd随笔

    yum install vsftpd -f安装vsftpd软件 systemctl start vsftpd 默认ftp目录为/var/ftp/,该文件夹下有pub文件夹 iptables -F 防火 ...

  6. 我对 前端 Js 开发方式 架构方向 的 一些看法

    有 网友 提到 : “复杂的页面,一个页面加载的模块多,各种异步请求,页面渲染,jquery链式编程操作dom数过于频繁.现在的前台越来越复杂,逻辑臃肿.” 哎, 所以 我说, 要改成用 同步调用 . ...

  7. 论 业务系统 架构 的 简化 (一) 不需要 MQ

    MQ , 就是 消息队列(Message Queue), 不知从什么时候起, MQ 被用来 搭建 分布式 业务系统 架构, 一个重要作用 就是用来  “削峰”   . 我们 这里 就来 讨论 如何 设 ...

  8. [转]AJAX 简介

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML CSS JavaScript ...

  9. react-redux 知识点

    React-Redux 使用 如果只使用redux,那么流程是这样的: component --> dispatch(action) --> reducer --> subscrib ...

  10. 自然语言处理工具HanLP被收录中国大数据产业发展的创新技术新书《数据之翼》

    在12月20日由中国电子信息产业发展研究院主办的2018中国软件大会上,大快搜索获评“2018中国大数据基础软件领域领军企业”,并成功入选中国数字化转型TOP100服务商. 图:大快搜索获评“2018 ...