Question

我从http://ecommerce-ux.london/wp-json/wp-api-menus/v2/menus/2拉出api，它似乎已经正确设置了所有内容，现在想要显示api object.items（即菜单子项）当我做{{menus}}时，我得到[对象对象]。

显然你不能使用* ngFor，如果它是一个对象，所以我需要创建一个管道，但仍然可以弄清楚如何显示元素，就像我得到键或值一样。

有人可以告诉我哪里出错了。

主menu.component.html

<ul>   

    <li *ngFor="let menu of menus  | menu">
        {{ menu.key }} {{ menu.value }}

        <ul> 
            <li *ngFor="let items of menu | menu">
                {{ items.key  }}

            </li>
        </ul>
    </li>
</ul>

menu.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Menu } from './menu';

@Injectable()
export class MenuService {

  private _wpMenuBase = "http://ecommerce-ux.london/wp-json/wp-api-menus/v2/";

  constructor(private http: Http) { }

  getPosts(): Observable<Menu[]> {

      return this.http
        .get(this._wpMenuBase + 'menus/2')
        .map((res: Response) => res.json());

  }



}

主menu.components.ts

import { Component, OnInit } from '@angular/core';
import { Menu } from '../menu';
import { MenuService } from '../menu.service';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-main-menu',
  templateUrl: './main-menu.component.html',
  styleUrls: ['./main-menu.component.css'],
  providers: [MenuService]
})
export class MainMenuComponent implements OnInit {

  menus: Menu[];

  constructor( private menuService: MenuService, private router: Router ) { }

  getPosts(){

  this.menuService 
     .getPosts()
      .subscribe(res => {
        this.menus = res;
      });
  }

  ngOnInit() {
    this.getPosts();

  }



}

menu.ts

export class Menu {
}

JSON

{
    "ID":2,
    "name":"Main menu","slug":"main-menu",
    "description":"","count":2,
    "items":[
        {
            "id":4,"order":1,"parent":0,
            "title":"Sample Page","url":"http:\/\/ecommerce-ux.london\/sample-page\/","attr":"","target":"","classes":"","xfn":"","description":"","object_id":2,"object":"page",
            "object_slug":"sample-page",
            "type":"post_type",
            "type_label":"Page"},
        {
            "id":7,
            "order":2,
            "parent":0,"title":"other page","url":"http:\/\/ecommerce-ux.london\/other-page\/","attr":"",
            "target":"","classes":"","xfn":"",
            "description":"",
            "object_id":5,"object":"page","object_slug":"other-page","type":"post_type","type_label":"Page"}
        ],
    "meta":
    {
        "links":
            {
                "collection":"http:\/\/ecommerce-ux.london\/wp-json\/wp\/v2\/menus\/",
                "self":"http:\/\/ecommerce-ux.london\/wp-json\/wp\/v2\/menus\/2"
            }
    }
}

menu.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'menu'
})
export class MenuPipe implements PipeTransform {

  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }



}

Answer 1

在这种情况下，您不需要管道。 Robin提供的答案在内部迭代中有轻微错误：<li *ngFor="let menuItem of menu">，您需要指定items是menu的子数组：

<li *ngFor="let menuItem of menu.items">

所以你的HTML应该是这样的：

<div>
  <h2>{{menu.name}}</h2>
  <div *ngFor="let menuItem of menu.items">
    <a href="{{menuItem.url}}">{{menuItem.url}}</a><br>
    <strong> Name: </strong> {{menuItem.id}}<br>
    <strong> Title: </strong> {{menuItem.title}}<br>
  </div>
</div>

这是demo plunker：）

Answer 2

问题在于您可以通过对象对象进行操作。你这样做是通过过滤器。现在最后我创建了自己的管道，或者调用过滤器。不确定它是否正确，但它就像一个魅力。

主menu.component.html

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'menu'
})
export class MenuPipe implements PipeTransform {


  transform(value, args:string[]) : any {
     //return value.filter( item => value[item] != value[item]);

    let keys = [];
    for (let key in value) {
     if(key == 'items'){
         for (let a in value[key]) {
            keys.push({menuitem: value[key][a]});
            // keys.push({menuName: value[key][a].id, menuName: value[key][a].title});
            // console.log(value[key][a].id);
         }

        //keys.push({key: key, value: value[key]});
      }
    }
    console.log(keys);
    return keys;

  }

}

PIPE

this

Angular 2，如何控制对象对象或循环对象对象

2 个答案: