Как отобразить возвращенные данные в HTML

Question

Я попытался получить информацию о пользователе с сервера randomuser.me и попытался отобразить эти данные пользователя на html-странице.Это то, что я пытался сделать для этого;

randomuser.page.ts

    import { Component, OnInit } from '@angular/core';
    import { HttpClient } from '@angular/common/http';

    @Component({
      selector: 'app-randomuser',
      templateUrl: './randomuser.page.html',
      styleUrls: ['./randomuser.page.scss'],
    })
    export class RandomuserPage implements OnInit {

        public randomUser = []; 

        constructor(private httpClient: HttpClient) { }

        get_users() {
            this.httpClient.get("https://randomuser.me/api/?results=1")
                .subscribe((res) => {
                    console.log(res);
                    this.randomUser[0] = res;
            });
        }
      ngOnInit() {
      }
    }

randomuser.page.html

    <ion-header>
        <ion-toolbar>
            <ion-title>randomuser</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <button (click)="get_users()">GET /Users</button>
        <ion-list>
            <ion-item *ngFor="let ru of randomUser">
                <h2>{{ru.gender}}</h2>
                <p>{{ru.email}}</p>
            </ion-item>
        </ion-list>
    </ion-content>

Мне удалось получить данные иотображается в выводе консоли, но я не могу показать это в части HTML.Как я могу решить эту проблему?

Answer 1

Ответ от api - это объект со свойством результатов, в котором запрошенные данные хранятся в формате массива.

Таким образом, вы должны хранить res.results для отображения ваших данных с html следующим образом:

this.randomUser = res.results;

Надеюсь, это поможет.

Answer 2

Обновление: https://stackblitz.com/edit/angular-bbiy2h

Поскольку

let x = [];
x[0] = 'foo';

означает, что вы присваиваете свойство с именем "0".

Array.push фактически расширяет массивна один пункт.Это означает, что [0] будет не доступом к свойству, а доступом к индексу.Но это происходит только после того, как массив содержит индекс.

let x = [];
x.push('foo');
x[0] = 'bar'

изменит содержимое массива с индексом [0].

Теперь на угловое обнаружение: в первом примереэто обнаружение не будет работать.Вы используете * ngFor, который прослушивает массив и соответствующие индексы.При назначении свойства [0] он ничего не обнаружит, поскольку массив привязан, но привязки к свойству [0] нет.

Со вторым оно будет работать, поскольку массив не изменяется,но содержание одного из индексов делает.Так что угловые обновляют его привязки.

Кроме того, как написано в посте meysam faghfouri, вам нужно детально взглянуть на ответ API: он возвращает объект, содержащий свойство результатов.И только там вы получили своих пользователей.Поэтому необходимо получить доступ к списку пользователей с помощью

res.results

вместо просто

res

.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-randomuser',
  templateUrl: './randomuser.page.html',
  styleUrls: ['./randomuser.page.scss'],
})
export class RandomuserPage implements OnInit {

    public randomUser: any; // Change this to "any" if only one user is used. or:
    // public randomUser = []; // leave it as is and see below

    constructor(private httpClient: HttpClient) { }

    get_users() { // UPDATE: Give this a proper name.
        this.httpClient.get("https://randomuser.me/api/?results=1")
            .subscribe((res: { results: any[] }) ) => {// UPDATE: Define the structure of the data! Otherwise this just will be Object!
                console.log(res);
                this.randomUser = res.results[0]; // only use the first user, or
                // this.randomUser = res.results; // use all entries returned by the api.
        });
    }
  ngOnInit() {
  }
}

При использовании только одного пользователя вы также можетеудалите * ngFor и привязайте к randomUser напрямую:

<ion-header>
    <ion-toolbar>
        <ion-title>randomuser</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <button (click)="get_users()">GET /Users</button>
    <ion-list>
        <ion-item>
            <h2>{{randomUser.gender}}</h2>
            <p>{{randomUser.email}}</p>
        </ion-item>
    </ion-list>
</ion-content>

Answer 3

Ваша проблема в том, что Angular обновляет DOM только при изменении ссылок.Изменения простого элемента массива не изменяют его ссылку.Вы можете использовать

detectChanges()

или просто вносить реальные изменения, обновляя ссылку на массивы

this.randomUser = ...this.randomUser

после того, как вы присвоили новые элементы массиву

А здесь какая-то сторонапримечания: вы должны заключить ваш httpClient в apiService, который возвращает наблюдаемое или обещание.Далее вы можете вернуть полностью новый массив в этой наблюдаемой, содержащий новые элементы.Делая это таким образом, вы можете использовать эту наблюдаемую непосредственно в вашем HTML

{{ myObservable | async }}

Answer 4

Вы установили данные как this "this.randomUser [0] = res", но вы использовали их как "let ru of randomUser". Вы должны изменить свой код на «this this.randomUser = res» в Компоненте.

Answer 5

Попробуйте это:

randomuser.page.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-randomuser',
  templateUrl: './randomuser.page.html',
  styleUrls: ['./randomuser.page.scss'],
})
export class RandomuserPage implements OnInit {

    public randomUser = []; 

    constructor(private httpClient: HttpClient) { }

    get_products() {
        this.httpClient.get("https://randomuser.me/api/?results=1")
            .then((res) => {
                console.log(res);
                this.randomUser = res;
        });
    }
  ngOnInit() {
  }
}

или

randomuser.page.html

<ion-header>
    <ion-toolbar>
        <ion-title>randomuser</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <button (click)="get_users()">GET /Users</button>
    <ion-list>
        <ion-item *ngFor="let ru of randomUser[0]">
            <h2>{{ru.gender}}</h2>
            <p>{{ru.email}}</p>
        </ion-item>
    </ion-list>
</ion-content>