首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Angular 显示英雄列表

    在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。 当依次遍历这个列表时,hero 会为每个迭代保存当前的英雄对象。...但那个样式表并不包含英雄列表所需的样式。 固然,你可以把更多样式加入到 styles.css,并且放任它随着你添加更多组件而不断膨胀。 但还有更好的方式。...但模板中的绑定表达式引用了 selectedHero 的属性(表达式为 {{selectedHero.name}}),这必然会失败,因为你还没选过英雄呢。 现在,从列表中随便点击一个条目。...为什么这样是正常的 当 selectedHero 为 undefined 时,ngIf 从 DOM 中移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。...当用户选择一个英雄时,selectedHero 也就有了值,并且 ngIf 把英雄的详情放回到 DOM 中。

    4.4K70

    如何给localStorage设置一个过期时间?

    过期时间, - 过期时间的单位可以自由发挥,小时、分钟、天都可以, - 注意点:存储的值可能是数组/对象,不能直接存储,需要转换 JSON.stringify, - 这个时间如何设置呢?...expired为非必须参数,所以默认为当前时间+1,即长期有效; - 如果存储时有设置过期时间,且在获取的时候发现已经小于当前时间戳,则执行删除操作,并返回空值; - 注意点:存储的值可能是数组/对象,...; - 为什么不用for in而是 for ?...for in循环遍历对象的属性时,原型链上的所有属性都将被访问, - 解决方案:使用hasOwnProperty方法过滤或Object.keys会返回自身可枚举属性组成的数组; class storage...存储的值可能是数组/对象,不能直接存储,需要转换 JSON.stringify * @ param {String} expired 过期时间,以分钟为单位 * @ 由

    88320

    Angular 2 数据显示

    本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插值表达式显示组件的属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...要显示组件的属性,插值是最简单的方式,格式为:{{属性名}}。...export class AppComponent { title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性的值...,并显示在浏览器中,显示信息如下: 使用 ngFor 显示数组属性 我们也可以循环输出多个站点,修改以下文件: app/app.component.ts 文件: import { Component }...template: ` {{title}} 我喜欢的网站: {{mySite}} 网站列表: ngFor

    2.4K20

    JavaScript基础学习--14 json、数组

    (json[key]); //因为key是变量,所以只能用[], 而不能用点方法 }      4、for in 遍历对象      5、关于for in 和for循环           5.1...    json和对象都没有length属性,所以遍历只能用for in 不能用for循环           5.2     数组既可以用for in,还可以呀for循环---》for in 范围广...此时是字符串形式,所以length = 1,且值为'4' 2、length属性可读可写 //tips....快速清空数组的方法: arr.length = 0; arr = []; //当数组中有万以上数据时,效率更高的方法是给数组重新赋值为空[], 这种清空数组的方法效率高 注意:数组中的length属性可写...,但是字符串中的length属性不可写,无效 3、数组方法(操作原数组)      3.1     arr.push();     //往数组的最后一位添加,且返回一个数组长度值     alert(arr.push

    1.2K100

    Angular 显示英雄列表

    在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。 当依次遍历这个列表时,hero 会为每个迭代保存当前的英雄对象。...但那个样式表并不包含英雄列表所需的样式。 固然,你可以把更多样式加入到 styles.css,并且放任它随着你添加更多组件而不断膨胀。 但还有更好的方式。...但模板中的绑定表达式引用了 selectedHero 的属性(表达式为 {{selectedHero.name}}),这必然会失败,因为你还没选过英雄呢。 现在,从列表中随便点击一个条目。...为什么这样是正常的 当 selectedHero 为 undefined 时,ngIf 从 DOM 中移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。...当用户选择一个英雄时,selectedHero 也就有了值,并且 ngIf 把英雄的详情放回到 DOM 中。

    4K30

    如何给localStorage设置一个有效期

    过期时间, 过期时间的单位可以自由发挥,小时、分钟、天都可以, 注意点:存储的值可能是数组/对象,不能直接存储,需要转换 JSON.stringify, 这个时间如何设置呢?...expired为非必须参数,所以默认为当前时间+1,即长期有效; 如果存储时有设置过期时间,且在获取的时候发现已经小于当前时间戳,则执行删除操作,并返回空值; 注意点:存储的值可能是数组/对象,取出后不能直接返回...; 为什么不用for in而是 for ?...for in循环遍历对象的属性时,原型链上的所有属性都将被访问,解决方案:使用hasOwnProperty方法过滤或Object.keys会返回自身可枚举属性组成的数组; class storage {...存储的值可能是数组/对象,不能直接存储,需要转换 JSON.stringify * @ param {String} expired 过期时间,以分钟为单位 *

    2K60

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

    ---- 基础概念 国内的官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2的一堆为什么:...);复制代码 polyfill.ts : 要兼容到ie10,安装里面对应的腻子(polyfill)..有详细的注释 typings.d.ts : 全局变量声明的文件 testconfig.*.json..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value...,用来动态判断增加多个样式 [class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item"

    6.2K20

    lodash源码分析之compact中的遍历

    首先判断传入的数组是否为 null 或者 undefined,如果是,则返回空数组。 然后用 for...of 来取得数组中每项的值,如果不为假值,则存入新数组 result 中,最后将新数组返回。...但是在看源码的时候,发现这里用了 for...of 来做遍历,其实除了 for...of 外,也可以用 for 或者 for...in 来做遍历,那为什么最后选了 for...of 呢?...在数组中,数组的索引是可枚举属性,可以用 for...in 来遍历数组的索引,数组中的稀疏部分不存在索引,可以避免用 for 循环造成无效遍历的弊端。...但是,for...in 有两个致命的特性: for...in 的遍历不能保证顺序 for...in 会遍历所有可枚举属性,包括继承的属性。...done属性值为 true 时停止。

    1K00

    AngularDart 4.0 高级-结构指令 顶

    NgFor指令具有比本指南中显示的NgIf更多的功能,包括必需的和可选的。 至少NgFor需要一个循环变量(let hero)和一个列表(heroes)。...这些是两个NgFor输入属性的名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己的上下文对象的属性。...Angular将它们设置为上下文的index和odd 属性的当前值。 没有指定let-hero的上下文属性。 它的原意是隐含的。...Angular设置let-hero为上下文的$implicit属性的值,NgFor已经用当前迭代的hero初始化了它的值。 API指南描述了额外的NgFor指令属性和上下文属性。...它是一个属性指令,用于控制其他两个switch指令的行为。 这就是为什么你写[ngSwitch],从不写成*ngSwitch。 NgSwitchCase和NgSwitchDefault是结构指令。

    16.1K20

    js的15种循环遍历,你掌握了几种?

    ,但是这里有一个坑需要注意: 任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的,for... in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性...但如果只想遍历自身的属性,使用for...in的时候,应该结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。...]); } } 为什么要 l=json.length;i遍历所有成员之后,累积值就是字符长度最长的那个成员。 10.Object,keys遍历对象的属性 Object.keys方法的参数是一个对象,返回一个数组。...但Object.keys不能返回不可枚举的属性;Object.getOwnPropertyNames能返回不可枚举的属性。 ?

    17.4K101

    Angular 中结构指令模式 - 它们是什么且怎么使用

    属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大的特性之一,然而它们却频繁被误解。...*ngIf - 根据表达式返回的布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配的是图 下面是一个结构化指令的例子。...这会将其转换为方括号 [] 中的属性绑定,比如 [ngIf]。 的其余部分,包含类名,插入到 里。...指令 我们使用 *ngFor 指令来遍历数组。...当条件值是 true 的时候,相关的元素就会被渲染到 DOM 中,其余的元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 的元素到 DOM 中。

    3.8K20

    读 zepto 源码之工具函数

    isArray(target[key])) // 如果源对象的属性值为数组,并且目标对象对应的属性值不为数组,则将目标对象对应的属性值置为空数组 target[key...如果 elements 为数组,用 for 循环,调用 callback ,并且将数组索引 index 和元素值 item 传给回调函数作为参数;如果为对象,用 for···in 遍历属性值,并且将属性...$.map 可以遍历数组(类数组)或对象中的元素,根据回调函数的返回值,将返回值组成一个新的数组,并将该数组扁平化后返回,会将 null 及 undefined 排除。...当为类数组时,用 for 循环,当为对象时,用 for···in 循环。...并且将对应的元素(属性值)及索引(属性名)传递给回调函数,如果回调函数的返回值不为 null 或者 undefined ,则将返回值存入新数组中,最后将新数组扁平化后返回。

    81500

    你所不知道的JSON

    不能被文本化的属性会被忽略。foo中属性b的值是函数定义,没有被转换而丢失。 还有哪些属性也不能转换? 1. 循环引用 如果一个对象的属性值通过某种间接的方式指回该对象本身,那么就是一个循环引用。...:{}}} c的属性指向foo对象,foo对象中的b属性又指向bar对象而无法处理,整个被忽略而返回空对象。...为什么有些属性无法被stringify呢? 因为JSON是一个通用的文本格式,和语言无关。...数组 只有在数组中的属性被stringify: let foo = { a : 1, b : "string", c : false }; JSON.stringify...函数 过滤函数以对象中的每一个属性和值作为输入,返回值有以下几种情况: 返回undefined表示忽略该属性; 返回字符串,布尔值或则数字将会被stringify; 返回对象将会触发递归调用知道遇到基本类型的属性

    1.1K20

    学习zepto.js(Hello World)

    ,用于生成节点的一个临时父节点(下边会说的);   第三个是一些属性值,是一个json结构的,但要注意为驼峰命名法,因为zepto的精简,所以不想jQuery那样的宽容。...然后遍历该object,将属性放入dom元素中,那个判断就不多做解释了,因为有一些属性被zepto做成方法了,所以直接调用该方法就可以了,这也是为什么调用$(“”,{text:’显示的值’}),可以通过...会有多个,所以css的值必须为一个json*/   完成以后就可以返回该dom元素了。...,这也是为什么获得jQuery对象就算是通过ID选择器也会返回一个length为1的数组的原因,如果没有获取到该元素,则返回一个空数组;     如果不满足该条件,则判断上下文是否为一个标签节点,文档对象节点或一个文档片段节点...直接返回空数组(任性~);       但如果满足条件了,继续进行判断,选择器为不包含子选择器的(get√),并且不是通过ID选择的(get√),而且支持getElementsByClassName的(

    3.5K80
    领券