开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么ngFor循环遍历JSON数组，但返回空属性值？

ngFor是Angular框架中的一个指令，用于在模板中循环遍历数组或对象，并生成相应的HTML元素。当使用ngFor循环遍历JSON数组时，返回空属性值的原因可能有以下几种：

JSON数据格式错误：首先需要确保JSON数据的格式是正确的。JSON数组应该是一个有效的JSON格式，包含方括号[]，并且每个元素之间使用逗号分隔。
数据绑定问题：ngFor指令需要与数据绑定配合使用，确保数据正确地绑定到模板中。可以通过在模板中输出JSON数组的长度来检查是否成功绑定数据，例如{{jsonArray.length}}。
错误的属性访问方式：在ngFor循环中访问JSON数组的属性时，需要使用正确的属性访问方式。如果JSON数组中的元素是对象，则需要使用点号(.)或方括号([])来访问属性。例如，如果JSON数组中的元素是{name: 'John', age: 25}，则可以使用{{element.name}}或{{element['name']}}来访问name属性。
异步数据加载问题：如果JSON数组是通过异步方式加载的，可能会出现数据还未完全加载完成就开始渲染模板的情况。这时可以使用*ngIf指令来判断数据是否加载完成，只有当数据加载完成后才进行ngFor循环。

综上所述，当ngFor循环遍历JSON数组但返回空属性值时，需要检查JSON数据格式、数据绑定、属性访问方式以及异步数据加载等方面的问题。如果问题仍然存在，可以进一步检查代码逻辑或提供更多的上下文信息以便进行排查。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

相关搜索:JavaScript遍历Json数组，选择不同的属性保存，但得到相同的数组使用Angular ngFor循环遍历JSON数组项，一次一个如何使用ngfor循环遍历属性，该属性是angular中的对象数组如何在PHP中循环遍历JSON嵌套数组值？数据表如何在Ract Native中不知道键的情况下循环遍历json数组并打印值？循环遍历JavaScript中数组中每个对象的每个属性值循环遍历共享属性值上的对象数组和组/增量对象值循环遍历具有可选属性的对象的数组，但始终完全循环循环遍历嵌套的json数组会将先前分配的值添加到数据模型中 js table表格打印

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular核心概念：数据绑定

JSON序列化：N。 NG表达式禁止出现new关键字。NG表达式中JSON是undefined。...-- JSON字符串序列化不可以JSON字符串：{{JSON.stringify({})}} （2）属性绑定形式1：直接在属性上用{{}}现在有的版本禁用 <p title="...<em>循环</em>绑定：<em>ngFor</em> let i= index和index as i是<em>遍历</em>索引 *2....对象<em>属性</em>就是CSS class名，<em>属性</em><em>值</em>为ture/false,turn的话该class就出现；否则该class不出现（4）事件绑定() (click)=“zengjia”; 注意：事件名用（）括起来

3.5K1 0

Echarts动态加载后台数据

注意：1、用Ajax请求获取后台数据 2、Echarts只能处理Json数据后台Controller：根据业务需求不同而返回不同数据，我前台要循环遍历Echarts的series进行数据添加，所以后台返了个二维数组过去...定义一个为series这个即将动态加入数据的配置项准备的名为Item的数组容器，接着对后台返回过来的数据(childkind)进行遍历，将遍历出的数据赋给容器中的相应属性(例：tp.name=childkind...由于series里面的data属性(接收的是数组数据)也需要进行数据动态加载，接着再定义一个list数组，循环写入数据到list中，再将list数组返给tp.data。

4K5 0

angular 模板常用语法

循环 extport class AppComponent { list = ["item1","item2","item3"]; } <li *ngFor="let item of list...数据绑定文本绑定(插值绑定) {{msg}} HTML绑定(用于插入HTML) 对象属性绑定(DOM Property) <img [...原因：clspan是HTML属性而不是DOM属性正确写法： xxx 2.1....管道日期格式转换 {{d|data:'yyyy-MM-dd'}} 对象转换json {{obj|json}} 数字格式转换’最小整数位数(自动补零).最小小数位数(自动补零...)-最大小数位数’ {{3.141592653|number:'3.3-10'}} 截取(字符串/数组) <li *ngFor="let i of collection | slice

1K2 0

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.1K10 0

Angular 显示英雄列表

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

4.4K7 0

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

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

7492 0

Angular 2 数据显示

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

2.4K2 0

如何给localStorage设置一个有效期

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

1.9K6 0

Angular 显示英雄列表

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

4K3 0

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.2K2 0

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 时停止。

9920 0

lodash源码分析之compact中的遍历

，并返回由不为假值元素组成的新数组。...首先判断传入的数组是否为 null 或者 undefined，如果是，则返回空数组。然后用 for...of 来取得数组中每项的值，如果不为假值，则存入新数组 result 中，最后将新数组返回。...但是在看源码的时候，发现这里用了 for...of 来做遍历，其实除了 for...of 外，也可以用 for 或者 for...in 来做遍历，那为什么最后选了 for...of 呢？...在数组中，数组的索引是可枚举属性，可以用 for...in 来遍历数组的索引，数组中的稀疏部分不存在索引，可以避免用 for 循环造成无效遍历的弊端。...done属性值为 true 时停止。

7716 0

js的15种循环遍历，你掌握了几种？

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

10.4K9 1

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是结构指令。

16K2 0

Angular 6.x 基础教程

那为什么前缀是 app 呢？...指令在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...，另外我们使用 index as i 用来访问数组中每一项的索引值。...true even: boolean —— 若当前项的索引值是偶数，则返回 true odd: boolean —— 若当前项的索引值是奇数，则返回 true 需要注意的是，*ngFor 中的 * 号是语法糖...需要注意的是，当 SimpleFormComponent 组件类的属性名称不是 message 时，我们需要告诉 Angular 如何进行属性值绑定，具体如下： export class SimpleFormComponent

15.6K2 0

读 zepto 源码之工具函数

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

7900 0

新手学HighCharts（二）----对比柱状图的动态加载

highcharts数据显示形式 ---- 在highcharts中有一个属性series，这个属性主要是配置图表要展示的数据。...this.lookupRemoteBean(studentScoreURL); class_check = check_class.split(","); //循环遍历数组...int sum=0; int pass=0; //最低分、最高分 //循环遍历获取最高分和最低分...Controller层 Controller层没什么好说的，只是起到一个接受界面数据，传给B层；接受B层处理的数据，返给界面；主要的业务逻辑处理都在B层。...当后台数据经过json转换之后，传达js里面的数据形式是这样的： [Array[4],Array[4]] 这样的话还不能够显示，为什么，因为每个Array下，存的是一个个的对象，给highcharts

1.1K1 0

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

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

3.8K2 0

你所不知道的JSON

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

1K2 0

学习zepto.js(Hello World)

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

3.5K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭