如何在 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

试试这个：

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>

Answer 2

您的问题是，Angular 仅在引用更改时更新 DOM。简单的数组项更改不会更改它的引用。您可以使用

detectChanges()

或者只是通过更新数组引用来做真正的改变

this.randomUser = ...this.randomUser

将一些新项目分配给数组后

还有一些旁注：您应该将您的 httpClient 包装到一个 apiService 中，return 是一个可观察的或承诺的。此外，您可以 return 在这个包含新元素的可观察对象中创建一个完整的新数组。这样做你可以直接在你的 html

中使用这个 observable

{{ myObservable | async }}

Answer 3

您设置了这样的数据 "this.randomUser[0] = res " 但您将其用作 "let ru of randomUser"。您应该将代码更改为 "this this.randomUser = res" in Component.

Answer 4

来自 api 的响应是一个对象，其结果属性将请求的数据存储为数组格式。

因此，您必须存储 res.results 才能以这种方式用 html 显示您的数据：

this.randomUser = res.results;

希望对您有所帮助。

Answer 5

更新：https://stackblitz.com/edit/angular-bbiy2h

因为

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

表示您正在分配名称为“0”的属性。

Array.push 实际上将数组扩展了一项。这意味着 [0] 不是属性访问，而是索引访问。但这只发生在数组包含索引之后。

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

将更改索引 [0] 处数组的内容。

现在进行 angular 检测：在第一个示例中，此检测不起作用。您正在使用 *ngFor 来侦听数组和相关索引。分配属性 [0] 时，它不会检测到任何内容，因为数组已绑定但属性 [0].

上没有绑定

对于第二个，它会起作用，因为数组不会改变，但其中一个索引的内容会改变。所以 angular 更新它的绑定。

此外，正如 meysam faghfouri 的 post 中所写，您需要详细查看 api 响应：它 returns 一个对象，包含一个结果属性.只有在那里你才有你的用户。因此需要使用

访问用户列表

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>

如何在 HTML 中显示返回的数据

How to display returned data in HTML

ionic-framework

angular

angular-httpclient