Question

我有一个类似JSON的数组

[
    { "name":"name1", "age": 21 },
    { "name":"name1", "age": 21 },
    { "age": 21 },
    { "name":"name1", "age": 21 },
    { "name":"name1", "age": 21 },
]

我正在使用ngFor绑定数据

<ul *ngFor="let item of data">
    <li>{{item.name}}</li>
</ul>

，现在出现错误“无法读取未定义的属性'名称'”。如何获得适当的输出？

Answer 1

如果您的某些变量中包含JSON，请确保您有一个对象变量，其名称数据为：

export class yourclass {
  public data =[Your json array];
}

如果您的JSON位于单独的文件中，则可以使用以下命令将其导入到typescript文件中：

import myjson from 'jsonfilepath/jsonfilename.json';
export class yourclass{
   public data = myjson;
}

Answer 2

let data = [
    { "name":"name1", "age": 21 },
    { "name":"name1", "age": 21 },
    { "age": 21 },
    { "name":"name1", "age": 21 },
    { "name":"name1", "age": 21 },
]

在数据数组中，第三个对象没有名称参数，因此出现错误。在组件中添加方法，然后在模板中调用该方法，如果对象中出现名称，则显示该方法，否则不显示任何内容。

<ul *ngFor="let item of data">
    <li>{{checkForName(item)}}</li>       
</ul>

.ts文件中的

checkForName(item: any){
    return item.name != undefined ? item.name : null;
}

我希望这能解决您的问题。

如何在Angular 6中使用ng-for处理JSON非结构化数据

2 个答案: