我的 NgFor 有什么问题？仅支持绑定到 Iterables，例如 Arrays

Question

我一直在与 Angular 合作一个项目。但是我的项目没有按预期运行。我在页面的控制台中收到错误 "ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."。

在我的页面上，我得到 "This works" 但仅此而已。同时我也应该看到我的 'dier'.

的 'soort'

在我的 html:

    <p>This works</p>
    <div
    class="dier"
    *ngFor="let dier of dieren$"> 
    <p>{{dier.soort}}</p>
   </div>

组件（没有导入和@Component）：

   export class DierListComponent implements OnInit {
  private _fetchdieren$: Observable<Dier[]>; // = this._dierDataService.dieren$;
  public errorMessage: string = '';

  constructor(private _dierDataService: DierDataService) {
   }

  get dieren$(): Observable<Dier[]>{
   return this._fetchdieren$;
  }

  addNiewDier(dier){
    this._dierDataService.addNewDier(dier); 
  }

  ngOnInit(): void {
    this._fetchdieren$ = this._dierDataService.dieren$.pipe(
      catchError(err => {
        this.errorMessage = err;
        return EMPTY;
      })
    );
  }
}

和数据服务（没有导入、@injectable 和一些（不重要的方法））：

export class DierDataService {
  private _dieren$ = new BehaviorSubject<Dier[]>([]);
  private _dieren: Dier[];

  constructor(private http: HttpClient) { 
    this.dieren$.subscribe((dieren: Dier[]) => {
      this._dieren = dieren;
      this._dieren$.next(this._dieren);
    });
  }
 /* get allDieren$(): Observable<Dier[]> {
    return this._dieren$;
  }*/

  get dieren$(): Observable<Dier[]>{ 
    return this.http.get(`${environment.apiUrl}/Dieren`).pipe(
      catchError(this.handleError),
      tap(console.log),
      map(
        (list: any[]): Dier[] => list.map(Dier.fromJSON)              
      )
    );
  }

  handleError(err: any): Observable<never> {
    let errorMessage: string;
    if (err instanceof HttpErrorResponse) {
      errorMessage = `'${err.status} ${err.statusText}' when accessing '${err.url}'`;
    } else {
      errorMessage = `an unknown error occurred ${err}`;
    }
    console.error(err);
    return throwError(errorMessage);
  }
}

谁能帮帮我？我已经坚持了好几天了。谢谢！

Answer 1

将 *ngFor 与 observable 一起使用时，您需要使用 async 管道。

像这样：*ngFor="let dier of dieren$ | async"

Async Pipe Docs

来自文档：

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

我的 NgFor 有什么问题？仅支持绑定到 Iterables，例如 Arrays

What is wrong with my NgFor? Only supports binding to Iterables such as Arrays

angular

frontend

ngfor