Angular和TypeScript遍历对象

Question

我正在尝试学习TypeScript和Angular。 我有一个对象，我想循环遍历并拉出key：value对，以便可以在HTML中动态创建按钮。 在HTML中，当我对对象进行<<variable>>时，将得到“ [object Object]”作为输出。 当我执行标准的ng-repeat="o in variable"我什么也没得到。

我的问题是如何遍历它，以便可以获取存储在该对象中的值。

HTML
    <div id="main_menu" class="container" role="main">
      <div class="container-fluid">
        <div class="row">
          <div class="page-header">WebJB</div>
          <div class="col-md-6">
            <div class="panel panel-default">
              <button href="#" class="panel-body btn btn-primary form-control">
                <h3 class="panel-title"></h3>
              </button>
          </div>


          <div ng-repeat="o in menu_parts"> <<--- I TRIED THIS
            {{menu_parts}}
          </div>


          </div>
        </div>
      </div>
    </div>

打字稿

import { Component, OnInit } from '@angular/core';





@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})



export class IndexComponent implements OnInit {
  menu_parts = {
    "CRM": {
      "name": "CRM",
      "link": "/",
      "colour": "white",
      "label": "CRM"
    },
    "Admin": {
      "name": "Admin",
      "link": "/admin",
      "colour": "red",
      "label": "Admin"
    },
    "Dashboard": {
      "name": "Dashboard",
      "link": "/dashboard",
      "colour": "white",
      "label": "Dashboard"
    },
    "Settings": {
      "name": "Settings",
      "link": "/settings",
      "colour": "white",
      "label": "Settings"
    }
  }



  constructor(){
    var x = this.menu_parts;
    console.log(x);
  }

  ngOnInit() {

  }


}

Answer 1

如果您使用的是angular 2，请使用ngFor而不是ngRepeat

<div *ngFor="let o in menu_parts"> 
     {{o}} 
 </div>

至于[object object]您必须使用json过滤器将所有内容显示为JSON数组

{{menu_parts | json}}