Ionic/Angular中Http API调用无法获取数据求助

我帮你排查下代码里的几个关键问题，这些应该就是导致数据无法正常显示的原因：

1. 请求头拼写错误 #

在service.api.ts里，你把Content-Type的值写成了application/jason，正确的格式是application/json，这个小错误可能导致服务器无法正确识别请求格式，返回不符合预期的响应：

// 错误写法
const httpOptions = { headers: new HttpHeaders({'Content-type': 'application/jason'}) };
// 修正后
const httpOptions = { headers: new HttpHeaders({'Content-Type': 'application/json'}) };

2. 错误日志的模板字符串语法错误 #

handleError方法里的模板字符串用错了语法，应该用${}而非$()，这个错误会导致你无法看到准确的错误信息，不利于排查问题：

// 错误写法
console.error( `Backend returned code $(error.status), ` + 'body was: $(error.error)');
// 修正后
console.error( `Backend returned code ${error.status}, body was: ${error.error}`);

3. HttpClient响应处理与数据赋值问题 #

Angular的HttpClient默认已经会把API返回的JSON响应解析成JavaScript对象/数组，你的extractData方法其实是多余的，甚至可能干扰响应数据。更关键的是：

• 如果你的API直接返回用户数组（比如[{email: 'xxx@test.com'}, ...]），那res就是这个数组，而不是包含results属性的对象。你现在写的this.datauser = res.results会把datauser设为undefined，直接导致页面的*ngFor无法遍历数据。
• 另外async/await和subscribe不要混用，Observable不是Promise，await在这里起不到等待作用，直接去掉async关键字即可。

修正后的getDataUser方法：

getDataUser(){
  this.api.getDataUser()
    .subscribe(res =>{
      console.log('API返回的数据:', res);
      // 如果res是数组，直接赋值给datauser
      this.datauser = res;
      console.log('赋值后的datauser:', this.datauser);
    }, err => {
      console.log('请求错误:', err);
    });
}

4. 页面模板的空值安全处理 #

为了避免datauser初始为undefined导致*ngFor报错，你可以做以下两种处理之一：

方式一：初始化空数组 #

在profile.page.ts里给datauser初始值：

export class ProfilePage implements OnInit {
  // 初始化为空数组，避免遍历undefined
  datauser: any[] = [];
  constructor( public api: ApiService ) { }
  // ...
}

方式二：模板中添加空值判断 #

<ion-content>
  <ion-list>
    <ion-item *ngFor="let data of datauser || []">
      {{data.email}}
    </ion-item>
  </ion-list>
</ion-content>

最后验证步骤 #

1. 先修正上面的拼写和语法错误
2. 查看控制台的console.log(res)输出，确认API返回的数据结构
3. 根据返回结构调整this.datauser的赋值逻辑
4. 确保datauser有值后，页面就能正常渲染数据了

内容的提问来源于stack exchange，提问作者Ebrahim Mithaiwala