Angular 9 找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays答案

【问题标题】：Angular 9 Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as ArraysAngular 9 找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays
【发布时间】：2020-08-09 18:51:45
【问题描述】：

我在模板中为 Observable 使用异步管道：

applicants$: Observable<UserProfile[]>;
  ngOnInit() {
    this.applicants$ = this.store.pipe(
      select(fromRootUserProfileState.getUserProfiles)
    ) as Observable<UserProfile[]>;
}

这里是 UserProfile.ts 接口：

import { Role } from './role/role';
import { Country } from './Country';

export interface UserProfile {
  id?: number;
  fullName?: string;
  roles?: Role[];
  windowsAccount?: string;
  firstName?: string;
  lastName?: string;
  email?: string;
  managerName?: string;
  managerId?: number;
  managerEmail?: string;
  companyId?: number;
  companyName?: string;
  countryId?: number;
  country?: Country;
  countryName?: string;
}

这里是 userProfile.service

  getUserProfiles(): Observable<UserProfile[]> {
    return this.http.get<UserProfile[]>(
      this.baseUrl + 'userprofiles/getuserprofiles'
    );
  }

在模板中，我使用 ngFor 通过异步管道遍历 Observable：

<mat-form-field
  fxFlex="22"
  appearance="outline"
  *ngIf="applicants$ | async as applicants"
>
  <mat-label>Applicant</mat-label>
  <mat-icon matPrefix>person</mat-icon>
  <mat-select
    placeholder="Applicant"
    name="applicant"
    [(ngModel)]="this.searchPurchaseOrder.applicantId"
  >
    <mat-option *ngFor="let ap of applicants" [value]="ap.id">
      ap.fullName
    </mat-option>
  </mat-select>
</mat-form-field>

但是，这是我得到的错误：

这是来自商店的数据形状。它正在被填充，所以那里没有问题：

【问题讨论】：

您能否检查您的商店是否有该数据？此外，console.log() 查看该数据的格式
我在最后添加了数据片段。

标签： javascript arrays angular observable typescript-typings

【解决方案1】：

如果你从后端获取数据.....像 node Mongo 然后按照这个方法

res.status().json({ data: [yourdata] })

现在你不需要做任何事情。

编码愉快。

【讨论】：

【解决方案2】：

感谢Matt Saunders' 回答此对模板的更改对我的情况有效：

<mat-form-field
  fxFlex="22"
  appearance="outline"
  *ngIf="this.applicants$ | async | keyvalue as applicants">
  <mat-label>Applicant</mat-label>
  <mat-icon matPrefix>person</mat-icon>
  <mat-select
    placeholder="Applicant"
    name="applicant"
    [(ngModel)]="this.searchPurchaseOrder.applicantId">
    <mat-option
      *ngFor="let applicant of applicants"
      [value]="applicant.value.id">
      {{ applicant.value.fullName }}
    </mat-option>
  </mat-select>
</mat-form-field>

【讨论】：

【解决方案3】：

您将需要使用键值管道来循环您的对象，就像它是一个数组一样。

https://angular.io/api/common/KeyValuePipe

<div *ngFor="let applicant of applicants | keyvalue">
  {{applicant.key}}:{{applicant.value}}
</div>

这也可以与异步管道一起使用，例如：

<div *ngFor="let item of (object$ | async) | keyvalue">

【讨论】：

【解决方案4】：

这里的问题是你试图使用 ngFor 来循环一个对象（这是不可能的）。如果您可以从网络标签发布响应的预览，这将有助于更好地了解此事。

【讨论】：

最后添加响应预览数据。
尝试使用 .
尝试删除 ngIf '*ngIf="applicants$"' 中的异步管道，然后像我之前建议的那样使用 ng 上的异步管道，看看是否可行。

【解决方案5】：

尝试使用带有别名的管道：let ap of applicants | async。

【讨论】：

异步管道已经被预先应用。如果我按照你说的那样使用它，我会收到此错误：错误错误：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'