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從“數據”中顯示有關用戶的信息。 這是我要做的主要任務...

錯誤：找不到類型為“對象”的其他支持對象“ [對象對象]”。 NgFor僅支持綁定到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); }