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. Atom编辑神器

    最近喜欢上了Atom编辑神器,安装就不说了,重点讲配置. 一:软件配置 1.先将欢迎界面去掉,每次打开Atom的时候都会出现,实在是很烦人. 就在欢迎界面里面有个复选框,去掉选中就可以了. 2.让At ...

  2. Javascript中的 “&” 和 “|” 详解

    转自:https://www.jb51.net/article/104394.htm 一.前言: 在文章开始之前,先出几个题目给大家看看: var num1 = 1 & 0; console. ...

  3. linux面试题(自己添加了一些注释说明)

    1.linux如何挂在windows下的共享目录 首先需要在Windows中创建一个文件夹用来共享,例如下面就是server是用来共享的,貌似在哪个位置创建都可以,我是在d盘创建的 1 mount.c ...

  4. 一个License的所带来问题

    在维护一个老产品时发现一个License的问题.产品是用Z80 Z8F6423, compiler用的是ZDS II Z8 Encode! 4.9.0. 由于有一个Bug要修复,所以我重新检查了一下它 ...

  5. .Net培训班课程体系

    .Net培训 第一部分:.Net基础 .Net基础:数据类型.变量.运算符.分支结构.循环结构.方法.反编译器.递归.递归算法的非递归优化: 面向对象:异常.封装继承多态.单例模式.装饰者设计模式.t ...

  6. Java IO的一些列子

    Write()方法写入文件 public static void main(String[] args){ try{ BufferedWriter out = new BufferedWriter(n ...

  7. apt-get update 与 apt-get upgrade 的区别

    总而言之,update是更新软件列表,upgrade是更新软件:所以,这两命令都是一块用,update后再upgrade. update 是更新 /etc/apt/sources.list 和 /et ...

  8. matlab:Source Control Integration

    http://cn.mathworks.com/help/matlab/source-control.html

  9. NET设计模式 第二部分 创建型模式(5):原型模式(Prototype Pattern)

    原型模式(Prototype Pattern) ——.NET设计模式系列之六 Terrylee,2006年1月 概述 在软件系统中,有时候面临的产品类是动态变化的,而且这个产品类具有一定的等级结构.这 ...

  10. hadoop不同版本有哪些

    一.Hadoop是什么? 首次听到hadoop这次单词,相信很多人跟我当时是一样,不免心中画上一个大大的问号——这是什么东西?Hadoop是什么?百度百科的解释是:Hadoop是一个由Apache基金 ...