开发者问题收集

如何修复尝试比较“[object Object]”时出现的错误。在 angular 10 中，仅允许使用定义的数组 [] 来处理数组和可迭代对象？

2021-04-21
3341
angular angular10

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

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

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

这是我的 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()
   })
 }
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 map 运算符以将流更改为数据属性： 

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

用户信息">

Gérôme Grignon
2021-04-21