Question

我试图从randomuser.me服务器获取用户信息，并试图在html页面内显示这些用户数据。这就是我试图做到的；

randomuser.page.ts

std::string s("258");
do {
    std::cout << s << '\n';
} while(std::next_permutation(s.begin(), s.end()));

randomuser.page.html

public static function canDebug($enviroment = 'any')
{
    if ($enviroment == "sql" && self::$disableSqlDebug) {
        return false;
    }
    if (php_sapi_name() == 'cli') {
        if (isset($_SERVER['TERM'])) {
            //The script was run from a manual invocation on a shell
            return (($enviroment == 'any' || $enviroment == 'console') && !self::$disableCliDebug);
        } else {
            //The script was run from the crontab entry
            return (($enviroment == 'any' || $enviroment == 'cron') && !self::$disableCliDebug);
        }
    } else {
        if (!isset(self::$mergedConfig['debug']['allowedIPRanges']))
            return false;
        return (self::isIPAllowedToDebug(self::getClientIPAddress()) && ($enviroment == 'any' || $enviroment == 'webOnly'));
    }
}

我成功获取数据并显示在控制台输出中，但无法在html部分显示。我该如何解决这个问题？

Answer 1

来自api的响应是一个具有result属性的对象，该属性将请求的数据存储为数组格式。

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

this.randomUser = res.results;

希望有帮助。

Answer 2

尝试一下：

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 3

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

detectChanges()

或只是通过更新数组引用来进行实际更改

this.randomUser = ...this.randomUser

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

这里还有一些注意事项：您应该将httpClient包装到apiService中，该apiService返回一个可观察的或promise。此外，您可以在此可观察对象中返回一个包含新元素的完整新数组。这样，您可以直接在html中使用此可观察对象

{{ myObservable | async }}

Answer 4

您已将数据设置为“ this.randomUser [0] = res”，但已将其用作“ randomUser的let ru”。您应该在Component中将代码更改为“ this this.randomUser = res”。

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]的数组的内容。

由于角度检测：在第一个示例中，该检测将不起作用。您正在使用* ngFor来监听数组和相关索引。分配属性[0]时，它不会检测到任何东西，因为该数组已绑定，但属性[0]上没有任何绑定。

对于第二个，它会起作用，因为数组不会改变，但是索引之一的内容会改变。因此，角度更新就是绑定。

此外，正如meysam faghfouri的文章所写，您需要详细了解api响应：它返回一个对象，其中包含一个results属性。只有在那里，您才拥有用户。因此需要使用

访问用户列表

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显示返回的数据

5 个答案: