JSON的Angular 6 Http Observable（数组对象到对象）-*ngFor不起作用

Question

我一直在寻找解决问题的好方法，但没有找到任何正确的方法。如果我的问题是重复的，我必须是盲人......对此感到抱歉。

所以我有一个小任务要做，这并不难，因为我是用以前的 API 完成的。

例子：

[{"id":1,"first_name":"Abdul","last_name":"Isakov",},
{"id":1,"first_name":"Abdul","last_name":"Isakov",}]

但现在我正在使用一些不同的 API，这让我无法显示用户列表。

我必须使用您可以在下面找到的 API 显示使用 Angular 6 的用户列表。

https://reqres.in/api/users?page=2

示例：

{"page":2,"per_page":3,"total":12,"total_pages":4,"data": 
[{"id":4,"first_name":"Eve","last_name":"Holt"}, 
{"id":5,"first_name":"Charles","last_name":"Morris"]}

正如你在这里看到的，我有类似的东西

{ number, number, number, number, array[]}

主要问题是我不能使用ngFor 从“数据”中显示有关用户的信息。这是我必须做的主要任务......

错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

我正在使用https://angular.io/api，但有一种更简单的方法来显示列表。

我的代码如下：

user.ts

export interface User {
  page: number,
  per_page: number,
  total: number,
  total_pages: number,
  data: Array<any>
}

users.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './user';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UsersService {

  readonly urlApi = 'https://reqres.in/api/users?page=2';
  users: Observable<User[]>;
  constructor(private http: HttpClient) { }
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.urlApi);
  }
}

users.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../../user';
import { UsersService } from '../../users.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})

export class UsersComponent implements OnInit {
  users: User[];
  constructor(private usersService: UsersService) { }
  ngOnInit() {
    this.getUsers();
    console.log(this.users);
  }
  getUsers(): void {
    this.usersService.getUsers()
      .subscribe(users => console.log(this.users = users));
  }
}

最后一个：users.component.html

<div class="container text-center">
<div class="users">
    <div class="row">
        <h2 class="col-12 users__title">Users List</h2>
    </div>
    <div class="row">
        <ul class="col-12 users__form">
                <li class="list-group-item" *ngFor="let user of users">
                    <div class="row">
                        <div class="col-6">
                            <img class="users_form--image">
                        </div>
                        <div class="col-6 users__form__information">
                            <p>{{user.data}}</p>
                        </div>
                    </div>
                </li>
        </ul>
    </div>
</div>
</div>

我需要创建另一个变量来存储“数据或类似的东西”的对象。

很抱歉垃圾邮件。感谢您的帮助！

Answer 1

您想要的数组位于结果的 data 属性中，因此您需要对其进行迭代或立即分配：

getUsers(): void {
  this.usersService.getUsers()
    .subscribe(result => this.users = result.data);
}

Answer 2

使用地图从您的 API 中提取属性 DATA

getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.urlApi).pipe(map(res => {return res['data']}));
}

Answer 3

你应该改变界面

export interface User { id: name, first_name: string, last_name: string }

export interface Entity { page: number, per_page: number, total: number, total_pages: number, data: Array<User> }

getUsers(): Observable<User[]> { return this.http.get<Entity>(this.urlApi) .pipe(map(({data}) => data); }