Angular9: Getting Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor只支持绑定Iterables,如Arrays。

我创建了一个简单的应用程序,使用HttpClientModule调用后台服务,但数据没有显示到日志中,我做了以下步骤,我使用的是angular-9。

能否请你检查一下代码。

先谢谢你。

  1. app.module文件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule} from '@angular/common/http';
import {RestAPIServices} from './services/rest-api.service';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [RestAPIServices],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. 模型.ts
export class Employee{
    id:number;
    name:string;
    gender:string;
    email? :string; // ? means optional property
    mobile:string;
    department:string;
    isActive:boolean;
    photo? :string;
}
  1. service.ts
import {Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import {HttpClient} from '@angular/common/http';
import { Employee } from '../models/employee.model';

@Injectable()
export class RestAPIServices{

    constructor(private httpClient:HttpClient){}

   getEmployee():Observable<Employee[]>{
    //this.httpClient.get<Employee[]>("http://127.0.0.1/angularCRUDservices/user/getEmployees").subscribe(res=>  console.log(res));
    return this.httpClient.get<Employee[]>("http://127.0.0.1/angularCRUDservices/user/getEmployees");
   }

}
  1. app.component.ts
import { Component } from '@angular/core';
import {RestAPIServices} from './services/rest-api.service';
import {Employee} from './models/employee.model';

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

  listEmployee : Employee[];
  title = 'simple-rest-app';

  constructor(private _employeeService:RestAPIServices){}
  ngOnInit(){

    this._employeeService.getEmployee().subscribe(
      data=>{
        console.log(data)
        this.listEmployee = data;
      }
    )

    console.log(this.listEmployee);
  }

}

从postman测试了servire,工作正常。

{"response":[{"id":"1","name":"Anand","gender":"Male","email":"a@gmail.com","mobile":"111111111","department":"2","isActive":"1","photo":"assets\/images\/emp1.jpg"},{"id":"2","name":"Kiran","gender":"Female","email":"k@gmail.com","mobile":"2222222222","department":"2","isActive":"1","photo":"assets\/images\/emp1.jpg"},{"id":"3","name":"Ravi","gender":"Male","email":"r@gmail.com","mobile":"3333333333","department":"2","isActive":"1","photo":"assets\/images\/emp2.jpg"},{"id":"4","name":"Kumar","gender":"Male","email":"k@gmail.com","mobile":"4444444444","department":"3","isActive":"1","photo":"assets\/images\/emp4.jpg"}]}

解决方案:

看来问题是服务器响应是一个对象,但不是数组。

// try to replace
this.httpClient.get<Employee[]>(...);

// by
this.httpClient.get<{ response: Employee[] }>(...).pipe(
  map(response => response.response)
);

给TA打赏
共{{data.count}}人
人已打赏
解决方案

Plotly Express中的Scatter 3d - Colab Notebook没有用等轴绘制。

2022-4-22 7:00:14

解决方案

使用Gradle的Sonarqube 8的Jacoco代码覆盖率。

2022-4-22 7:00:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索