如何在Angular 4中使用ngFor迭代json对象答案

【问题标题】：How to iterate json object using ngFor in Angular 4如何在Angular 4中使用ngFor迭代json对象
【发布时间】：2017-11-11 03:53:23
【问题描述】：

问题：

我有以下代码：

<div>
   {{ data | json }}
</div>

产生以下json格式的结果

[  
 {  
  "display_title":"Megan Leavey",
  "mpaa_rating":"PG-13",
  "critics_pick":1,
  "byline":"NEIL GENZLINGER",
  "headline":"Review: In ‘Megan Leavey,’ a Marine, Her Dog and a Bond Forged in War",
  "summary_short":"Based on a true story, this film, starring Kate Mara, is both harrowing and heartstring-tugging.",
  "publication_date":"2017-06-08",
  "opening_date":"2017-06-09",
  "date_updated":"2017-06-09 02:44:28",
  "link":{  
     "type":"article",
     "url":"http://www.nytimes.com/2017/06/08/movies/megan-leavey-review-kate-mara.html",
     "suggested_link_text":"Read the New York Times Review of Megan Leavey"
  },
  "multimedia":{  
     "type":"mediumThreeByTwo210",
     "src":"https://static01.nyt.com/images/2017/06/09/arts/09MEGAN/09MEGAN-mediumThreeByTwo210.jpg",
     "width":210,
     "height":140
  }
},
{  
  "display_title":"The Hero",
  "mpaa_rating":"R",
  "critics_pick":1,
  "byline":"JEANNETTE CATSOULIS",
  "headline":"Review: For an Aging Actor, Another Chance to Be ‘The Hero’",
  "summary_short":"Brett Haley’s low-key feature, about an older actor seeking redemption after being reduced to a cliché, belongs to its star, Sam Elliott.",
  "publication_date":"2017-06-08",
  "opening_date":"2017-06-09",
  "date_updated":"2017-06-09 02:44:28",
  "link":{  
     "type":"article",
     "url":"http://www.nytimes.com/2017/06/08/movies/the-hero-review-sam-elliott.html",
     "suggested_link_text":"Read the New York Times Review of The Hero"
  },
  "multimedia":{  
     "type":"mediumThreeByTwo210",
     "src":"https://static01.nyt.com/images/2017/06/09/arts/09HERO/09HERO-mediumThreeByTwo210.jpg",
     "width":210,
     "height":140
  }
 }
]

还有我的pipe 代码

import { Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'keys'})
 export class CustomPipe implements PipeTransform {
transform(value, args:string[]) : any {
  if (!value) {
     return value;
  } 

let keys = [];
 for (let key in value) {
   keys.push({key: key, value: value[key]});
   } 
   return keys;
 } 
}

使用来自iteration a json object on Ngfor in angular 2 的建议，

我正在尝试实现这样的电影标题：

<ul class="suggestions" >
    <li class="suggestion1" *ngFor="#movie of data | keys">

        <a href="#" target="_blank" class="username">{{ movie.display_title }} </a>

    </li>

</ul>

但它会抛出 error 之类的

zone.js:642 未处理的承诺拒绝：模板解析错误：解析器错误：[#movie of data | 中的第 1 列出现意外标记 #键] 在 ng:///AppModule/RoughWorkComponent.html

我正在使用Angular 4.1.3

【问题讨论】：

您使用的是哪个版本的 Angular？
我使用的是 Angular 4.1.3

标签： arrays json angular

【解决方案1】：

*ngFor="#movie of data | keys">

需要

*ngFor="let movie of data | keys">

你使用的是旧语法

编辑：正如@AJT_82 所说，该对象是一个数组而不是 JSON，因此不需要管道：

*ngFor="let movie of data"就够了

【讨论】：

@Hiranya 你可以删除if (!value) { return value; } 行并尝试吗？
data 是一个数组... ;)