使用API​​并在Ionic / Angular中列出项目

Question

所以我一直在尝试列出从API获取的一些项目。到目前为止，我设法从API和.map获取数据。但我还是无法让它显示在屏幕上。这就是我在app.Component上的内容：

onGet(){
this.MenuServiceProvider.getMenus().subscribe((menus: any[]) => {
  this.menuList = menus;
  console.log("sucess : " + this.menuList);
}
); }

console.log正在返回我[object object]，我觉得很奇怪。

getMenus() {
return this.http.get('ApiURL').map(
  (response : Response) => {
    const menus = response.json();
    return menus;
  }
)}}

这就是获得API o menu-service.ts的原因。无法显示API，因为它是私有的东西，但它包含一个“数据”字符串，其中包含“title”和“icon”等其他字符串。

<ion-menu  [content]="content">

<button ion-button clear class="user-button">
   <img class="user-icon" src="../assets/img/user-icon.png"><span class="user-text">
   Billie Dog</span>
</button>
<div>
  <button ion-button clear class="switch-button">
     <img class="swap-icon" src="./assets/img/switch-icon.png">
   </button>
</div>

<ion-list class="page-list">
  <ion-item *ngFor "let menu of menuList">
    <p> {{menu.data.title}} </p>
  </ion-item>
</ion-list>

<div class="main-footer">
<p class="menu-footer"> Versão 1.0</p>
</div>

这是我调用数据的部分，我认为这是问题所在。我对Angular很新。任何帮助将不胜感激。

Answer 1

您正在与+

连接

console.log("sucess : " + this.menuList);

您应该使用,代替：

console.log("sucess : ", this.menuList);

以及它未在模板中显示的原因是因为您已将数据存储在menuList中，而不是menus，就像您尝试在模板中进行迭代一样，因此它应该是：

<ion-list class="page-list">
    <ion-item *ngFor="let menu of menuList"> <!-- Here! -->
      <p> {{menu.data.title}} </p>
    </ion-item>
</ion-list>