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

Question

问题：

我有以下代码：

<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;
 } 
} 

使用来自迭代的建议在Ngfor上的角度2中的json对象 ，

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

<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数据| 键]中的ng：///AppModule/RoughWorkComponent.html

我正在使用Angular 4.1.3

Answer 1

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

需要是

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

您正在使用旧语法

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

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