[英]How to iterate json object using ngFor in Angular 4
問題:
我有以下代碼:
<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
*ngFor="#movie of data | keys">
需要是
*ngFor="let movie of data | keys">
您正在使用舊語法
編輯:正如@ AJT_82所說,對象是一個數組而不是JSON,因此不需要管道:
*ngFor="let movie of data"
就足夠了
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.