如何遍历在角4

问题使用ngFor JSON对象：如何遍历在角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; 
} 
}

运用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 Unhandled Promise rejection: Template parse errors: Parser Error: Unexpected token # at column 1 in [#movie of data | keys] in ng:///AppModule/RoughWorkComponent.html

我使用Angular 4.1.3

来源

2017-06-09 Hiranya

你使用哪个版本的角？ – echonax

我正在使用Angular 4.1.3 – Hiranya

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

个

需求是

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

您正在使用旧的语法

编辑：作为@AJT_82规定的对象是一个数组不是一个JSON，所以没有必要管：

*ngFor="let movie of data"已经足够了

来源

2017-06-09 08:13:27 echonax

它显示空白行 – Hiranya

@Hiranya你可以删除'if（！value）{ return value; }'线并尝试？ – echonax

完成但仍然相同 – Hiranya

如何遍历在角4

回答

相关问题