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正式版现在可以 ...
随机推荐
- AangularJS过滤器详解
(参考angular权威指南) 过滤器: 用来格式化需要展示给用户的数据: 使用过滤器的方式: (1)$scope.name=$filter("lowercase").(&qu ...
- Go Example--map
package main import "fmt" func main() { //初始化map make(map[类型][类型]) m:= make(map[string]int ...
- web.xml配置Servlet出错(DispatcherServlet)
想当然的把servlet-mapping当成servlet的属性 后台也不报错,但是输入url,就是死活不执行那个servlet servlet和servlet-mapping是同一级的对象
- Centos7修改默认启动级别(命令行,图形切换)
方法一: 终端输入以下命令 修改为命令行方式 systemctl set-default multi-user.target 修改为图形界面 systemctl set-default graphic ...
- IntelliJ IDEA 快捷键说明大全(中英对照、带图示详解)
因为觉得网络上的 idea 快捷键不够详尽,所以特别编写了此篇文章,方便大家使用 idea O(∩_∩)O~ 其中的英文说明来自于 idea 的官网资料,中文说明主要来自于自己的领会和理解,英文说明只 ...
- How to get checksum by IAR
- CentOS6.5下安装Apache2.4+PHP7
CentOS6.5下安装Apache2.4+PHP7 http://blog.csdn.net/along602/article/details/42695779 http://www.th7.cn/ ...
- oracle-null和默认值
Oracle的默认值处理要当心,如果应用中使用的是ORM工具,则必须要考虑对于字段为Null的处理,必要时在ORM工具中将Null转换为default或插入时去掉值为Null的字段. 可以将下面的系统 ...
- zabbix--3.0--1
实验环境 实验用2到2台机器,实验所用机器系统环境如下,可以看到2台机器的主机名和IP地址 [root@linux-node1 ~]# cat /etc/redhat-release CentOS L ...
- openstack--3--控制节点安装配置keystone
Keystone介绍 Keystone作用 用户与认证:用户权限与用户行为跟踪: 服务目录:提供一个服务目录,包括所有服务项与相关Api的端点,它是个注册中心 用户认证包括:User,Tenant,T ...