通过 Angular2 中的管道将 JSON 项目呈现为列表项答案

【问题标题】：Render JSON items as list-item via Pipe in Angular2通过 Angular2 中的管道将 JSON 项目呈现为列表项
【发布时间】：2017-05-28 00:00:51
【问题描述】：

我想在我的 Angular2 应用程序中通过 Pipe 将 JSON 数据呈现为单独的列表项元素，但我的代码不起作用。

我的 JSON 数据（我通过 http 加载）：

[
 {
   "name": "Release One",
   "songs": [
     "Song 1",
     "Song 2",
     "Song 3"
   ],
   "year": "2008"
 },
 {
   "name": "Release Two",
   "songs": [
     "Song 1",
     "Song 2",
     "Song 3",
     "Song 4",
     "Song 5"
   ],
   "year": "2010"
 },
 {
   "name": "Release Three",
   "songs": [
     "Song 1",
     "Song 2",
     "Song 3",
     "Song 4"
   ],
   "year": "2011"
 },
 {
   "name": "Release Four",
   "songs": [
     "Song 1",
     "Song 2",
     "Song 3",
     "Song 4",
     "Song 5"
    ],
   "year": "2011"
 }
]

我的@Pipe根据here提供的解决方案@：

@Pipe({name: 'KeysPipe'})
export class KeysPipe 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;
  } 
}

我的@Component：

@Component({
  selector: 'my-app',
  template: `
    <div class="releases-component">
      Releases Component starts here!
      <div *ngFor="let release of releases">
        <h3>Name: {{release.name}}</h3>
        <h3>Name: {{release.year}}</h3>
      </div>
    </div>

    <ul>
      <li *ngFor="let release.song of releases | keys">
        {{release.song}}
      </li>
    </ul>
  `,
})

Plunker example

请帮助理解我做错了什么。

【问题讨论】：

我不明白后面的迭代......你想用let release.item of releases 完成什么。你的json里没有release.item？你想在那里渲染什么？您能否在问题中举例说明您想要的输出，谢谢。

标签： json angular pipe

【解决方案1】：

希望我对您的理解正确，并且您确实希望逐项迭代这些项目。那么这可以相当容易地完成。像这样嵌套*ngFor：

<div class="releases-component">
  <div *ngFor="let release of releases">
    <h3>Name: {{release.name}}</h3>
    <h3>Year: {{release.year}}</h3>
    <li *ngFor="let song of release.songs">{{song}}</li>
  </div>
</div>

这会很好地输出：

Name: Release One
Year: 2008
Song 1
Song 2
Song 3

Name: Release Two
Year: 2010
Song 1
Song 2
Song 3
Song 4
Song 5

.... and so on...

编辑：工作plunker

【讨论】：