Question

问题：

我的代码如下：

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

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

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

    </li>

</ul>

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

我正在努力获得这样的电影片名：

error

但它会抛出Angular 4.1.3之类的

zone.js：642未处理的承诺拒绝：模板解析错误：分析器错误：[#movie of data |中第1列的意外令牌＃密钥]在ng：///AppModule/RoughWorkComponent.html

我正在使用clear()

Answer 1

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

需要

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

您使用的是旧语法

编辑：由于@AJT_82声明对象是一个数组而不是JSON，所以不需要管道：

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

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

1 个答案: