如何修复尝试区分“[object Object]”的错误。在 angular 10 using defined array[] 中只允许数组和迭代器？

Question

我正在为我的应用程序使用 angular 10。在我的应用程序中，我有一个 get 方法，我得到了我想要显示的数据。对于这个问题，这里有很多答案，但我尝试了所有方法都无法正常工作。

我有一个模型文件，在那个文件中，我也有 deserialize()、serialize() 选项，所以响应数据类型应该与接口文件类型相同。但是显示此错误的响应数据（仅允许数组和可迭代对象）也未在 HTML 中呈现。但我为响应数据变量使用了一个空数组。

我把我的 stackblitz URL 也放在这里了，请帮我解决这个问题。

https://stackblitz.com/edit/sankar-apr-16?file=src%2Fapp%2Fmodel-users%2Fmodel-users.component.ts

这是我的 model.ts 代码：

userInfo: userInformation[] = [];

ngOnInit() {
 this.enableLoader = true;
 this.formService.findAll().subscribe((data: userInformation[]) => {
   this.enableLoader = false;
   this.userInfo = data;
   console.log(this.userInfo)
 });

这是我的 mode.ts 文件

export class userInformation extends Base implements PageObject {
@serializable
public id: number;
@serializable
public avatar: string;
@serializable
public email: string;
@serializable(alias('first_name'))    
public firstname: string;
@serializable(alias('last_name'))
public lastname: string;

 deserialize(input: any): this {
   return Object.assign(this, deserialize(userInformation, input));
 }
}

这是我的服务文件：

public findAll():Observable<userInformation[]> {
   return this.httpClient.get<userInformation[]>(this.usersUrl + '/api' + '/users' + '?page=2', {
    headers: this.httpHeaders.contentTypeApplication,
     params: this.httpHeaders.serializeParams()
   })
 }

Answer 1

你的console.log结果：

data: Array[6]
page: 2
per_page: 6
support: Object
total: 12
total_pages: 2

如果您查看 console.log(this.userInfo) 生成的 devtools 日志，它不会记录 userInformation[] 类型的数组。此数组嵌套到响应的 data 属性中。

由于响应是一个对象，您会收到一条错误消息，说明您无法对其进行迭代（因为您无法对对象进行迭代）。

您需要更改服务返回的数据以将其映射到数据属性。

您需要一个新接口来匹配 api 的响应：

interface UsersResponse {
  data: userInformation[];
  page: number;
  per_page: number;
  support: any;
  total: number;
  total_pages: number;
}

然后您需要更新 http 调用的返回类型并添加 rxjs 映射运算符以将流更改为数据属性 :

public findAll():Observable<userInformation[]> {
    return this.httpClient.get<UsersResponse>(this.usersUrl + '/api' + '/users' + '?page=2', {
      headers: this.httpHeaders.contentTypeApplication,
      params: this.httpHeaders.serializeParams()
    }).pipe(
      map(response => response.data)
    );
  }

最后一步，更新您的模板：

<div class="wrapper" *ngFor="let users of userInfo?.data">

到

<div class="wrapper" *ngFor="let users of userInfo">

如何修复尝试区分“[object Object]”的错误。在 angular 10 using defined array[] 中只允许数组和迭代器？

How to fix Error trying to diff '[object Object]'. Only arrays and iterables are allowed in angular 10 using defined array[]?

angular

angular10