получение и отображение бэкэнда json в проекте Angular / Ioni c

Question

Я работаю в проекте ioni c с angualar framework, где мое требование - получить данные json серверной части через вызов API и прочитать данные JSON на странице HTML.

Ниже приведен код, который я пробовал

Вызов 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 page: определен массив для хранения данных из API

userNames = [];

(создал serive.ts и определил там URL-адрес API), и записанная функция выглядит следующим образом:

   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

Если userNames заполнены правильно:

Должно быть

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

вместо

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