Wordpress 角度2，如何控制对象或通过对象循环

我正在从中提取api，它似乎已正确设置了所有内容，现在希望从api object.items（即菜单子项）显示 当我做{{menus}}时，我得到[object]

显然，如果它是一个对象，就不能使用*ngFor，因此我需要创建一个管道，但仍然可以找出如何显示元素，因为我得到了所有的键或值

谁能告诉我哪里出了问题

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

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

菜单

export class Menu {
}

JSON

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



}

---

问题是，您无法通过对象进行ngfor。你这样做的方式是通过过滤器。现在，我终于创建了自己的管道，或者说是调用过滤器。不确定这是否正确，但它起到了很好的作用

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

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

---

在这种情况下，您不需要管道。Robin提供的答案在内部迭代中有一个小错误：

，您需要指定

项是
菜单的子数组：

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


{{menu.name}


名称：{{menuItem.id}}

标题：{{menuItem.Title}}


这里有一个：）
两个版本都给了我一个错误：第一个版本给了我一个错误。；找不到类型为“主菜单”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件。以及./MainMenuComponent类MainMenuComponent-内联模板：11:7中的第二个错误，原因是：undefined不是对象（评估'self.context.menu.items'）为什么使用我提供的api？是的，第一个版本会给您一个错误。我没有注意到您实际上为url提供了响应，所以我删除了这一选项。它应该与我提供的内容一起工作，因为您可以看到plunker中的响应与您从api中提取的响应完全相同。由于在plunker中，除了https请求之外，您不允许发出任何其他请求，因此我为您创建了一个模拟后端，带有mockable和确切的响应，您可以看到它工作正常：您的代码中必须存在一些其他错误，而不是您提供的：）正如您在这里看到的，我创建了完全相同的响应。这个循环错误表明发生了其他事情。Self-context错误指您试图从自身引用某个变量本身。使用管道时不存在圆形错误，因为它不再指向自身。因此，在代码的其他地方，您遇到了一些错误：）
<li *ngFor="let menuItem of menu.items">

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