在 Angular/Ionic 项目中获取和显示后端 json

Question

我在一个带有 Angular 框架的 ionic 项目中工作，我的要求是通过 api 调用获取后端 json 数据并在 HTML 页面中读取 JSON 数据。

下面是我试过的代码

代理 api 调用：

http://example.com/broker/get-user-names

后端Json数据：

 [

  {
"USER_NAME": "John",
"USER_COUNTRY": "USA"
},


 {
"USER_NAME": "Smith",
"USER_COUNTRY": "Canada"
 },


{
 "USER_NAME": "Peter",
"USER_COUNTRY": "Russia"
 }

 ]

在 .ts 页面中：定义了一个数组来保存来自 API 的数据

userNames = [];

（创建了一个serive.ts并在那里定义了api url），编写的函数如下；

   getUserNames() {
    this.apiService.getUserNames(this.apiService.loggedInUser.value.id)
     .then(res => {
     this.userNames= JSON.parse(res); 
  },
  err => {
    alert(err);
  }
)
 }

现在当尝试在 HTML 页面中显示内容时，它没有显示任何内容

<p *ngFor="let user of userNames">{{user.USER_NAME}} </p>

这不起作用。我不明白我哪里出错了，请帮助我。

谢谢。

Answer 1

如果用户名填写正确：

应该是

<p *ngFor="let user of userNames">{{user.USER_NAME}} </p>

而不是

<p>*ngFor="let user of userNames">{{user.USER_NAME}} </p>