NgFor有什么问题？仅支持绑定到数组等可迭代对象

Question

我一直在与Angular合作开发一个项目。但是我的项目无法正常运行。我收到错误“错误错误：找不到类型为'object'的其他支持对象'[object Object]'。NgFor仅支持绑定到Iterables，例如数组。”在我页面的控制台中。

在我的页面上，我看到了“这有效”，仅此而已。同时，我还应该看到“死亡”的“排序”。

在我的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与可观察对象一起使用时，需要使用async管道。

例如：*ngFor="let dier of dieren$ | async"

Async Pipe Docs

来自文档：

异步管道订阅了Observable或Promise，并返回它发出的最新值。发出新值时，异步管道会将要检查的组件标记为更改。当组件被销毁时，异步管道将自动退订，以避免潜在的内存泄漏。