Ionic 3调用Web API后列表始终为空问题排查求助

我帮你排查了代码里的几个关键问题，这些问题导致你的列表无法正常渲染：

问题1：错误地将API响应转为字符串 #

在你的Page组件中，你把API返回的data用JSON.stringify()转成了字符串并赋值给name：

this.name = JSON.stringify(data);
let names = JSON.stringify(data);

这样name就变成了一个字符串，而不是可以用*ngFor遍历的数组对象，自然无法渲染列表。

问题2：模板的循环绑定和数据引用错误 #

• 你的HTML模板里用了*ngFor="let data of item"，但组件里根本没有定义item这个变量，应该绑定到你从API获取的数组数据；
• 模板里引用{{name.parmPurchReqId}}也是错误的，循环时应该用当前遍历的变量（比如data）来访问属性，而不是全局的name。

问题3：RestService中的URL包含多余空格 #

你的请求URL末尾有个空格：'http://192.168.0.112:44444/api/prgetlist '，这可能会导致请求异常（虽然你说返回了数据，但最好修正避免潜在问题）。

修正后的代码 #

RestService代码

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class RestProvider {
  constructor(public http: Http) {
    console.log('Hello RestProvider Provider');
  }

  searchMovies() {
    // 去掉URL末尾的多余空格
    var url = 'http://192.168.0.112:44444/api/prgetlist';
    var body = {
      "parmClaimsUser": "ClaimGuy@MyApp.com",
      "parmCompany": "APU"
    }
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers });
    // 直接返回Observable，简化代码
    return this.http.post(url, body, options).map(res => res.json());
  }
}

Page组件代码

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { RestProvider } from '../../providers/rest/rest'
import 'rxjs/add/operator/map';

@Component({
  selector: 'person-home',
  templateUrl: 'person.html'
})
export class PersonPage {
  // 定义数组变量存储API返回的列表数据
  items: any[] = [];

  constructor(public http: Http, private restprovider: RestProvider) { }

  ionViewWillEnter() {
    this.restprovider.searchMovies().subscribe(
      data => {
        // 直接将返回的数组赋值给items，无需转成字符串
        this.items = data;
        // 打印数据确认结构是否符合预期
        console.log('API返回数据:', data);
      },
      err => {
        alert('请求错误: ' + JSON.stringify(err))
      }
    );
  }
}

HTML模板代码

<ion-header>
  <ion-navbar>
    <ion-title> Person </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- 绑定到items数组，遍历每个item -->
  <ion-list inset *ngFor="let item of items">
    <ion-item>
      <!-- 使用当前遍历的item变量访问属性 -->
      <h2>{{item.parmPurchReqId}}</h2>
      <p>{{item.parmPurchReqName}}</p>
    </ion-item>
  </ion-list>

  <!-- 空状态提示，提升用户体验 -->
  <div *ngIf="items.length === 0" style="text-align: center; margin-top: 20px;">
    暂无数据
  </div>
</ion-content>

额外提醒：

• 确认API返回的data是一个数组，如果返回的是包含数组的嵌套对象（比如{ result: [...] }），需要调整赋值逻辑为this.items = data.result;；
• 打开浏览器开发者工具（F12），查看控制台日志和网络请求，确认API返回的数据结构是否符合预期。

内容的提问来源于stack exchange，提问作者Theodorus Agum Gumilang