Angular 2，如何控制對象對象或通過對象對象循環

Question

我從http://ecommerce-ux.london/wp-json/wp-api-menus/v2/menus/2拉動api，它似乎有一切設置正確，現在想顯示從api object.items（這是菜單兒童） 當我做{{menus}}時，我得到[object object]。

顯然你不能使用* 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

的問題是，你無法通過對象的對象ngfor。你這樣做的方式是通過過濾器。現在我最終創建了自己的管道，或者叫做過濾器。不知道它是否正確，但它像一個魅力。

主menu.component.html

<ul> 
     <li *ngFor="let menu of menus | menu"> 
      <a href="{{ menu.menuitem.url }}"> 
       <strong> Name :</strong> {{ menu.menuitem.id }} | 
       <strong> Title :</strong> {{ menu.menuitem.title }} <br /> 
      </a> 
     </li> 
    </ul> 

PIPE

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; 

    } 

}