[英]Angular 9 Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
I am using async pipe in my template for an Observable:我在我的模板中使用 async pipe 作为 Observable:
applicants$: Observable<UserProfile[]>;
ngOnInit() {
this.applicants$ = this.store.pipe(
select(fromRootUserProfileState.getUserProfiles)
) as Observable<UserProfile[]>;
}
Here is UserProfile.ts interface:这是 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;
}
And here is the userProfile.service这是 userProfile.service
getUserProfiles(): Observable<UserProfile[]> {
return this.http.get<UserProfile[]>(
this.baseUrl + 'userprofiles/getuserprofiles'
);
}
In the template I've used ngFor to iterate through the Observable with an async pipe:在模板中,我使用 ngFor 通过异步 pipe 遍历 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>
However, here is the error I am getting:但是,这是我得到的错误:
Here is the data shape from the store.这是来自商店的数据形状。 It is being populated, so there is no problem there:
它正在被填充,所以那里没有问题:
You will need to use the keyvalue pipe to loop through your object as if it were an array.您将需要使用键值 pipe 来循环您的 object,就像它是一个数组一样。
https://angular.io/api/common/KeyValuePipe https://angular.io/api/common/KeyValuePipe
<div *ngFor="let applicant of applicants | keyvalue">
{{applicant.key}}:{{applicant.value}}
</div>
This can work with the async pipe too, eg:这也可以与异步 pipe 一起使用,例如:
<div *ngFor="let item of (object$ | async) | keyvalue">
The problem here is that you are trying to use ngFor to loop through an object (Which is not possible).这里的问题是您正在尝试使用 ngFor 循环通过 object (这是不可能的)。 If you can post a preview of the response from the network tab it would be helpful to get a better idea about the matter.
如果您可以从网络选项卡发布响应的预览,这将有助于更好地了解此事。
Thanks to Matt Saunders ' answer this change to the template has worked for my case:感谢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>
Try using the pipe with the alias also: let ap of applicants | async
尝试使用
let ap of applicants | async
和别名: let ap of applicants | async
. let ap of applicants | async
。
Well if you getting the data from backend..... Like node Mongo then follow this approach好吧,如果您从后端获取数据.....就像节点 Mongo 一样,请遵循这种方法
res.status().json({ data: [yourdata] })
Now you don't need to do anything.现在你不需要做任何事情。
Happy codding.快乐的编码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.