首页 文章

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

提问于
浏览 次
0

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

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

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

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很新 . 任何帮助，将不胜感激 .

angular rest api ionic2

1 回答

  • 2

    你正在与 + 连接

    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>
    回复于

相关问题