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仅支持绑定到数组等Iterable。

我正在与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); }

JSON的Angular 6 Http Observable（将数组对象转换为对象）-* ngFor不起作用

3 个答案: