Angular：映射错误：NgFor 仅支持绑定到 Iterables，例如 Arrays

Question

我订阅了一个 obserable 以获取在 angular 8 中工作正常的数据。我需要在使用映射时格式化日期我收到错误提示

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

所以我相信添加地图运算符并更改返回类型。我不确定我实施地图的方式有什么问题。有人可以告诉我吗？

export interface IPersonNote {
    id: number;
    personId: number;
    note: string;
    authorId: number;
    authorName: string;
    fileName: string;
    mimeType: string;
    alias: string;
    createdBy: string;
    createdDate: Date;
}

原始方法

import { map } from 'rxjs/operators';
public personNotes: IPersonNote;

   loadPersonNotes() {
        this.isCurrentUser = this.id !== this.userService.getCurrentUser().id;
        this.userService.getPersonNote(this.id)
          .subscribe((x: IPersonNote) => {

            this.personNotes = x;
          });
      }

修改方法

import { map } from 'rxjs/operators';
public personNotes: IPersonNote;

loadPersonNotes() {
    this.isCurrentUser = this.id !== this.userService.getCurrentUser().id;
    this.userService.getPersonNote(this.id)
      .pipe(map(note => <any>{
        createdDate: format(note.createdDate, 'Do MMM YYYY'),
      }))
      .subscribe((x: IPersonNote) => {

        this.personNotes = x;
      });
  }

用户界面

<div *ngIf="personNotes">
<div class="portlet-body">
    <ul class="tier-history">
      <li *ngFor="let note of personNotes">
        <span class="tier-title"> {{ note.authorName }} </span>
        <span class="tier-dates">
            {{ note.created }} 
        </span>
        <span class="tier-title"> {{ note.note }} </span>
      </li>
    </ul>
  </div>
</div>

服务

public getPersonNote = (id: number): Observable<IPersonNote> =>
this.http.get<IPersonNote>(`${this.baseUrl}person-note/${id}`)

Answer 1

你的方法返回了错误的数据。

应该是这样的（注意subscribe中的变量类型）：

   public personNotes: IPersonNote[]; // Not a single but few notes (or none)

   loadPersonNotes() {
        this.isCurrentUser = this.id !== this.userService.getCurrentUser().id;
        this.userService.getPersonNotesByUserId(this.id)
          .subscribe((personNotes: IPersonNote[]) => {

            this.personNotes = personNotes;
          });
   }