Angular2のパイプでJSONアイテムをレンダリングする

Question

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

私が間違っていることを理解してください。

Answer 1

うまくいけば私はあなたを正しく理解していますし、項目ごとに項目を繰り返したいと思っています。それはかなり容易に達成できます。出力うまくなり

<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... 

はEDIT：ワーキングplunker