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正式版现在可以 ...
随机推荐
- 【shell编程】之基础知识-语法
一.shell变量 1.定义变量 定义变量时,变量名不加美元符号($,PHP语言中变量需要), 如: your_name="runoob.com" 注意,变量名和等号之间不能有空格 ...
- python——SMTP发送简单邮件
[root@localhost python]# cat smtp.py import smtplib import string from email.mime.text import MIMETe ...
- skipper filter 扩展开发
skipper 的扩展包含filter类型的,以及Predicates ,当然script(lua)脚本也是 这次主要是filter类型的开发 filter 接口约定 格式 filter 至少需要包含 ...
- 数据驱动 vs 关键字驱动:对搭建UI自动化测试框架的探索
UI自动化测试用例剖析 让我们先从分析一端自动化测试案例的代码开始我们的旅程.以下是我之前写的一个自动化测试的小Demo.这个Demo基于Selenium与Java.由于现在Selenium在自动化测 ...
- First 1
一,Python介绍 1,python的出生与应用 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打 ...
- tomcat源码阅读之默认连接器
默认连接器 一.UML图: 1.所有的连接器都要实现Connector接口,必须创建Request对象和Response对象,httpConnector作为默认连接器,肯定也是要实现Connector ...
- CentOS6.5系统下RPM包安装MySQL5.6(转)
1.查看操作系统相关信息. [root@linuxidc ~]# cat /etc/issue CentOS release 6.5 (Final) Kernel \r on an \m [root@ ...
- dojo:如何用MultiSelect实现类似ListBox风格的FromTo功能
欲实现的功能如下图: 主要要解决的问题包括两个方面: 一个是MultiSelet初始化的工作,一个是FromTo功能按钮的实现.这主要是因为MultiSelect控件是存储无关的,并不像Select或 ...
- java中三种for循环之间的对比
普通for循环语法: for (int i = 0; i < integers.length; i++) { System.out.println(intergers[i]); } foreac ...
- EXCEL 将网络图片地址插入为锁定的图片单元格宏
Sub InsertPic2(ByVal 图片链接 As String, ByVal 插入图片表名 As String, ByVal 插入图片单元格地址 As String) On Error Res ...