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. Python 面向对象(创建类和对象,面向对象的三大特性是指:封装、继承和多态,多态性)

    概念:                                                                                                 ...

  2. 下面有关 JAVA 异常类的描述,说法正确的有()

    都是Throwable的子类: 1.Exception(异常) :是程序本身可以处理的异常. 2.Error(错误): 是程序无法处理的错误.这些错误表示故障发生于虚拟机自身.或者发生在虚拟机试图执行 ...

  3. Xenserver之HA实现-NFS的实现

    环境: 在vm上安装好一台Xenserver服务器,一台centos7虚拟机(用来做NFS存储,因为实现HA需要共享存储),网络连接方式为桥接模式 echo '- - -'>> /sys/ ...

  4. day 53 js学习之

    ---恢复内容开始--- 1.昨日作业讲解 弄一个上图一样的选择器,可以全选,可以反选,取消 <!DOCTYPE html> <html lang="zh-CN" ...

  5. 20 约束 异常处理 MD5 日志

    三十九, 一.类的约束 1.抛出异常    NotImplementedError 2.抽象方法 含有抽象方法的类是抽象类 抽象类中的方法全是抽象方法的是接口 抽象类不能创建对象 二.异常处理 处理完 ...

  6. js 数字数组按大小排序

    var num = [7,8,6,5,2] //倒序排列 num.sort((a,b)=>{return b-a}) //正序排列 num.sort((a,b)=>{return a-b} ...

  7. [ERROR] InnoDB: ibdata1 different size (rounded down to MB)

    启动mysql实例报错,查看 error log ## 错误信息2018-08-31T10:38:36.945081Z 0 [ERROR] InnoDB: The Auto-extending inn ...

  8. 用express快速写一个hello world

    首页要具备 node.js环境, npm环境 创建一个目录, 然后进入此目录作为工作目录 mkdir myapp cd myapp 通过npm init 创建一个package.json文件 npm ...

  9. vue cli 3.x 设置4个空格缩进

    vue cli 3.x 设置4个空格缩进: 文件.editorconfig中,indent_size = 2修改为indent_size = 4 文件 .eslintrc.js 添加一行:'inden ...

  10. django csrf使用教程,解决Forbidden (403)CSRF verification failed. Request aborted.

    Django版本号:1.11.15 django中post请求报错:Forbidden (403)CSRF verification failed. Request aborted. HelpReas ...