قم بإدراج المستخدمين مع متطلبات إعادة تثبيت Angular Rest-APi

0

أحاول سرد المستخدمين من REST-API reqres. ولكن عندما أنقر على الزر لإدراج المستخدمين ، أحصل على 

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

يمكنني سرد المستخدمين في وحدة التحكم ولكن ليس في الصفحة. قرأت أن الإصدار الزاوي الأخير لا يقرأ وظيفة الخريطة ولا أعرف لماذا أتلقى هذا الخطأ.

هذا هو بلدي users.component.ts ملف: 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map'



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

  users: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {}

  public getUsers() {
    this.users = this.http.get('https://reqres.in/api/users')
  }

}

وهذا هو بلدي users.component.html ملف: 

<button (click)="getUsers()">list users</button>
<div *ngFor="let user of users">
    {{ user | json }}
</div>

1 إجابة

0

this.http.get() إرجاع الملاحظ. عند تعيين this.users = this.http.get() ، سيكون كائن المستخدمين ملاحظة و ngFor لن تتمكن من التكرار فوقه. 

ngOnInit() {
  this.users = []; // to prevent ngFor to throw while we wait for API to return data
}

public getUsers() {
  this.http.get('https://reqres.in/api/users').subscribe(res => {
    this.users = res.data;
    // data contains actual array of users
  });
}
:مؤلف
مشاركة الرابط

أسئلة ذات صلة

أسئلة شائعة:

علامات السؤال:
rest
فوق
قائمة طعام