Render JSON items как элемент списка через трубку в Angular2

Question

Я хочу отображать данные JSON в виде отдельных элементов списка элементов через Pipe в моем приложении Angular2, но мой код не работает.

Мои данные 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

Надеюсь, я правильно понял вас, и вы хотите перебирать элементы, элементы по позиции. Ну, это можно сделать довольно легко. Просто вложенности в *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... 

EDIT: Рабочая plunker