0

我正在订阅一个 observable 以获取在角度 8 中工作正常的数据。我需要在使用映射时格式化日期我收到错误消息

找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 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}`)

实施建议的解决方案后出错

Types of parameters 'x' and 'value' are incompatible.
    Type '{ created: string; id: number; personId: number; note: string; authorId: number; authorName: string; fileName: string; mimeType: string; alias: string; createdBy: string; }[]' is 
not assignable to type 'IPersonNote[]'.
      Type '{ created: string; id: number; personId: number; note: string; authorId: number; authorName: string; fileName: string; mimeType: string; alias: string; createdBy: string; }' is 
not assignable to type 'IPersonNote'.
        Types of property 'created' are incompatible.
          Type 'string' is not assignable to type 'Date'.

49       .subscribe((x: IPersonNote[]) => {
                    ~~~~~~~~~~~~~~~~~~~~~~~
4

1 回答 1

0

您问题中的地图操作员返回单个对象并且不更改数据并返回它为什么ngFor会抛出错误，因为case数据不是可迭代对象。

我假设你得到一个数组，IPersonNote所以我运行数组映射方法来更新createdDate数组项 n.createDate 值的属性基础

这将返回一个新数组，createDate并将作为格式方法返回值的基础。

note.map(n => ({  ...n, createdDate: format(n.createdDate, 'Do MMM YYYY') }) )

像这样的更新 loadPersonNotes 方法

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

        this.personNotes = x;
      });
}
于 2020-01-08T14:08:54.430 回答