ngIf和ngFor共用
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共用的更多相关文章
- Angular2学习笔记——NgModule
在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...
- Angular2笔记:NgModule
Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Dire ...
- Angular2 指令
1. 指令说明 Angular2 指令是构成Angular2应用程序的重要组成部分,指令主要用来对模板的标签或者元素附加一些新的特性或者功能,改变一个 DOM 元素的外观或行为,Angular2指 ...
- 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 (四)第五节: ...
- Angular2经典文章集锦
Angular Metadata 等基础知识 http://www.jianshu.com/p/aeb11061b82c Metadata告诉Angular如何处理一个类,只有我们将它通告给Angul ...
- Angular学习笔记(2)——TODO小应用
Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法 ...
- Angular2 - Starter - Routes, Route Resolver
在基于Angualr的SPA中,路由是一个很重要的部分,它帮助我们更方便的实现页面上区域的内容的动态加载,不同tab的切换,同时及时更新浏览器地址栏的URN,使浏览器回退和前进能导航到历史访问的页面. ...
- Angular2的模块架构浅谈
引言angular2相比1引入了更完善的模块系统,回忆ng1的应用中通常在页面的html标签或body标签中添加ng-app节点,值为应用的模块名,整个应用都将围绕这个模块来展开,到了ng2,模块概念 ...
- Angular4.0.0正式版发布
来源于angular4.0.0发布时的公告,译者:niithub 原文发布时间:Thursday, March 23, 2017 翻译时间:2017年3月24日 angular4.0.0正式版现在可以 ...
随机推荐
- [codeforces Mail.Ru Cup 2018 Round 3][B Divide Candies ][思维+数学]
https://codeforces.com/contest/1056/problem/B 题意:输入n,m 求((a*a)+(b*b))%m==0的(a,b)种数(1<=a,b<= ...
- map遍历的几种方式和效率问题
一.map遍历的效率 先创建一个map,添加好数据: Map<String, String> map = new HashMap<>();for (int i = 0; i & ...
- 我的TDD实践---TDD概念篇
“我的TDD实践”系列之TDD概念篇 写在前面: 我的TDD实践这几篇文章主要是围绕测试驱动开发所展开的,其中涵盖了一小部分测试理论,更多的则是关注工具的使用及环境的搭建,做到简单实践先行,后理论专精 ...
- 每天进步一点点-实例为导学-一个java对象序列化的例子
序列化和反序列化例子 如果我们想要序列化一个对象, (对象 转 序列)首先要创建某些OutputStream(如FileOutputStream.ByteArrayOutputStream等),然后将 ...
- MySQL InnoDB Engine--数据预热
##========================================##在MySQL 5.7版本中引入将Innodb Buffer中数据备份和回复的新特性,具体原理时将Buffer p ...
- VS打包项目详细解析
使用VS打包项目,其实很多简单.微软官方文档很详尽,故不再细述,只列出相关链接 1创建安装项目 如何:创建或添加部署项目 2 添加项目输出 如何:向部署项目中添加项 3添加用户界面 部署中的用户 ...
- tomcat源码阅读之默认连接器
默认连接器 一.UML图: 1.所有的连接器都要实现Connector接口,必须创建Request对象和Response对象,httpConnector作为默认连接器,肯定也是要实现Connector ...
- py-day1-4 python基本数据类型2
# replace 替换 text = 'xiaomafafafahaoyunlianlian' v = text.replace('fa','shun') x = text.replace('fa' ...
- overflow标签
有时父标签设置了固定的宽高,但子标签把父标签给撑开了,就要在父标签里加一个overflow标签,等于hidden超出的地方隐藏,等于auto超出的地方隐藏,并且多个滚动条 <div style= ...
- 移动互联网终端的touch事件,touchstart, touchend, touchmove 很棒的文章
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...