对angular2中的ngfor和ngif指令嵌套实例讲解

ng2 结构指令不能直接嵌套使用，可使用标签来包裹指令

示例如下

<ul>
<ng-container *ngFor="let item of lists">
<div class="thumb p-date" *ngIf="item.picurl">
<a href="# " rel="external nofollow" ><img src="{{item.picurl}} " alt=" " style="width:79px;height: 70px; "></a>
</div>
</ng-container>
</ul>:

以上这篇对angular2中的ngfor和ngif指令嵌套实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular2内置指令NgFor和NgIf详解

    Angular2内置指令NgFor和NgIf详解

    在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或者ES6的类,它们的网址分

  • 详解Angular2 关于*ngFor 嵌套循环

    详解Angular2 关于*ngFor 嵌套循环

    在项目开发中拿到的数据是这样的,要循环遍历出来.可是在ng2中好像不能直接遍历Object datas: any = [ { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"}, { num: 1, date: "2017-04-12", sellNum: "1231234"

  • 详解Angular 4.x NgIf 的用法

    NgIf 指令作用 ngIf 指令用于根据表达式的值,在指定位置渲染 then 或 else 模板的内容. then 模板除非绑定到不同的值,否则默认是 ngIf 指令关联的内联模板. else 模板除非绑定对应的值,否则默认是 null. NgIf 指令语法 简单形式 <!--语法糖--> <div *ngIf="condition">...</div> <!--Angular 2.x中使用template--> <ng-temp

  • 对angular2中的ngfor和ngif指令嵌套实例讲解

    ng2 结构指令不能直接嵌套使用,可使用标签来包裹指令 示例如下 <ul> <ng-container *ngFor="let item of lists"> <div class="thumb p-date" *ngIf="item.picurl"> <a href="# " rel="external nofollow" ><img src=&quo

  • angular2组件中定时刷新并清除定时器的实例讲解

    实例如下: import { Component,OnInit,ChangeDetectionStrategy,ChangeDetectorRef,OnDestroy} from "@angular/core"; @Component({ changeDetection:ChangeDetectionStrategy.OnPush }) export class xxxComponent{ private timer; constructor(private ref : ChangeD

  • 对vue中v-on绑定自定事件的实例讲解

    关于官网vue中v-on绑定自定义事件的个人理解 对官网实例进行了一些修改,如下图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on绑定自定义事件</title> <script src="vue.js"></script> </head>

  • 对python中基于tcp协议的通信(数据传输)实例讲解

    阅读目录 tcp协议:流式协议(以数据流的形式通信传输).安全协议(收发信息都需收到确认信息才能完成收发,是一种双向通道的通信) tcp协议在OSI七层协议中属于传输层,它上承用户层的数据收发,下启网络层.数据链路层.物理层.可以说很多安全数据的传输通信都是基于tcp协议进行的. 为了让tcp通信更加方便需要引入一个socket模块(将网络层.数据链路层.物理层封装的模块),我们只要调用模块中的相关接口就能实现传输层下面的繁琐操作. 简单的tcp协议通信模板:(需要一个服务端和一个客户端) 服务

  • python中tkinter的应用:修改字体的实例讲解

    参考链接:tkinter book font字体的参数有如下6个 family: 字体类别,如'Fixdsys' size: 作为一个整数,以点字体的高度.为了获得字体的n个像素高,使用-n. weight: "BOLD" 表示加粗, "NORMAL" 表示正常大小,默认是NORMAL slant:斜体(默认正常), "NORMAL"表示正常,"ITALIC"表示字体倾斜 underline:下划线,1表示添加下滑线,0表示没

  • python pandas库中DataFrame对行和列的操作实例讲解

    用pandas中的DataFrame时选取行或列: import numpy as np import pandas as pd from pandas import Sereis, DataFrame ser = Series(np.arange(3.)) data = DataFrame(np.arange(16).reshape(4,4),index=list('abcd'),columns=list('wxyz')) data['w'] #选择表格中的'w'列,使用类字典属性,返回的是S

  • 对Python中list的倒序索引和切片实例讲解

    Python中list的倒序索引和切片是非常常见和方便的操作,但由于是倒序,有时候也不太好理解或者容易搞混. >>> nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] >>> print(nums[-1]) 9 >>> print(nums[-2:]) [8, 9] >>> print(nums[:-3]) [0, 1, 2, 3, 4, 5, 6] 例如,给定一个数组nums. 索引操作 nums[-1]

  • vue项目中跳转到外部链接的实例讲解

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s

  • 对pandas将dataframe中某列按照条件赋值的实例讲解

    在数据处理过程中,经常会出现对某列批量做某些操作,比如dataframe df要对列名为"values"做大于等于30设置为1,小于30设置为0操作,可以这样使用dataframe的apply函数来实现, 具体实现代码如下: def fun(x): if x >= 30: return 1 else: return 0 values= feature['values'].apply(lambda x: fun(x)) 具体的逻辑可以修改fun函数来实现,但是按照某些条件选择列不是

  • python中判断数字是否为质数的实例讲解

    在计算机程序中,算法是灵魂,是程序的精髓所在.程序执行效率的高低直接取决于算法的优劣,所以计算机算法是计算机课程必修课.算法可以快速计算出我们所需要的结果,例如判断质数,这是很基础的内容,具体如何操作呢?下面小编向大家演示在python如何判断数字是否为质数. 质数:一个大于1的自然数,除了1和它本身外,不能被其他自然数(质数)整除(2, 3, 5, 7等),换句话说就是该数除了1和它本身以外不再有其他的因数. 判断代码: def isprime(a): if isinstance(a,int)

随机推荐