Question

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

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

@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;
  } 
}

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

@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>
  `,
})

我的 @Component ：

public class MyPage {
    Form form;
    int items;
    WebMarkupContainer progressbar = new WebMarkupContainer("progressbar");
    int progress = 0;
    MyData dataItems = new MyData();

    public MyPage() {
        progressbar.setOutpuMarkupId(true);
        items = 5;
        setupForm();
    }

    public void setupForm() {
        form = new Form("form", new CompundPropertyModel(dataItems));
        form.add(new IndicatingAjaxButton("button") {
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
                for (int i = 0; i < items; i++) {
                    progress++;
                    progressbar.add(new AttributeModifier("style", "width: " + progress + "%;"));
                    //rest post call goes here
                }
            }
        });
    }

    add(form);
    add(progressbar);

}


//in html page
<div wicket:id="progressbar" id="progressbar" style="width: 0% ; background-color:green;"></div>

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

编辑：工作plunker

在Angular2中通过Pipe将JSON项呈现为列表项

1 个答案: