角度9无法找到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterables

Question

我正在模板中使用异步管道作为可观察对象：

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>

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

这是商店中的数据形状。它正在被填充，因此那里没有问题：

Answer 1

您将需要使用键值管道来遍历对象，就像对象是数组一样。

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">

Answer 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>

Answer 3

还尝试使用别名为let ap of applicants | async的管道。

Answer 4

这里的问题是，您正在尝试使用ngFor遍历对象（不可能）。如果您可以在“网络”标签上发布回复的预览，则可以更好地了解此事。

Answer 5

好吧，如果您从后端获取数据..... 像 node Mongo 然后按照这种方法

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

现在您无需执行任何操作。

编码愉快。