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

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

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

在数据数组中，第三个对象没有 name 参数，因此它给出了错误。在组件中添加一个方法并在模板中调用它，如果对象中显示名称，则显示它，否则什么都不显示。

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

在 .ts 文件中

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

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

Answer 2

如果某个变量中有 JSON，请确保具有名称为 data 的对象变量：

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

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

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