ngFor is giving an error "ERROR RuntimeError: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe?"

[abdalhmeedshishani]

Is there an existing issue for this?

• I have searched the existing issues

Description

I followed the doc "book-store/part-10", here is the image of where from i'm getting the error:

I tried everything but nothing is working
error image:

and for some reason i started getting this error too:

Reproduction Steps

No response

Expected behavior

html: `

Author *
<option [ngValue]="null">Select author <option [ngValue]="author.id" *ngFor="let author of authors$ | async"> {{ author.name }}

`

ts: `import { ListService, PagedResultDto } from '@abp/ng.core';
import { Component, OnInit } from '@angular/core';
import { BookService, BookDto, bookTypeOptions, AuthorLookupDto } from '@proxy/books';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmationService, Confirmation } from '@abp/ng.theme.shared';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@component({
selector: 'app-book',
templateUrl: './book.component.html',
styleUrls: ['./book.component.scss'],
providers: [ListService, { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }],
})
export class BookComponent implements OnInit {
book = { items: [], totalCount: 0 } as PagedResultDto;

form: FormGroup;

selectedBook = {} as BookDto;

authors$: Observable<AuthorLookupDto[]>;

bookTypes = bookTypeOptions;

isModalOpen = false;

constructor(
public readonly list: ListService,
private bookService: BookService,
private fb: FormBuilder,
private confirmation: ConfirmationService
) {
this.authors$ = bookService.getAuthorLookup().pipe(map((r) => r.items));
}

ngOnInit() {
const bookStreamCreator = (query) => this.bookService.getList(query);

this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
  this.book = response;
});

}

createBook() {
this.selectedBook = {} as BookDto;
this.buildForm();
this.isModalOpen = true;
}

editBook(id: string) {
this.bookService.get(id).subscribe((book) => {
this.selectedBook = book;
this.buildForm();
this.isModalOpen = true;
});
}

buildForm() {
this.form = this.fb.group({
authorId: [this.selectedBook.authorId || null, Validators.required],
name: [this.selectedBook.name || null, Validators.required],
type: [this.selectedBook.type || null, Validators.required],
publishDate: [
this.selectedBook.publishDate ? new Date(this.selectedBook.publishDate) : null,
Validators.required,
],
price: [this.selectedBook.price || null, Validators.required],
});
}

save() {
if (this.form.invalid) {
return;
}

const request = this.selectedBook.id
  ? this.bookService.update(this.selectedBook.id, this.form.value)
  : this.bookService.create(this.form.value);

request.subscribe(() => {
  this.isModalOpen = false;
  this.form.reset();
  this.list.get();
});

}

delete(id: string) {
this.confirmation.warn('::AreYouSureToDelete', 'AbpAccount::AreYouSure').subscribe((status) => {
if (status === Confirmation.Status.confirm) {
this.bookService.delete(id).subscribe(() => this.list.get());
}
});
}
}
`

Actual behavior

error messages: "ERROR RuntimeError: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe? Find more at https://angular.dev/errors/NG02200
at NgForOf.ngDoCheck (common.mjs:3233:31)
at callHookInternal (core.mjs:5150:14)
at callHook (core.mjs:5181:9)
at callHooks (core.mjs:5131:17)
at executeInitAndCheckHooks (core.mjs:5081:9)
at selectIndexInternal (core.mjs:11893:17)
at Module.ɵɵadvance (core.mjs:11876:5)
at OrderComponent_ng_template_31_Template (order.component.html:99:121)"

"Access to font at 'https://rsms.me/inter/font-files/Inter-Medium.woff2?v=4.1' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Regression?

No response

Known Workarounds

No response

Version

9

User Interface

Angular

Database Provider

EF Core (Default)

Tiered or separate authentication server

None (Default)

Operation System

Windows (Default)

Other information

No response