尝试将属性添加到observable中的对象

Question

根据标题非常简单的情况，尝试将attendingType属性添加到事件对象，如果该人正在参加（因此我可以在视图中更改状态）。

其他说明，我使用Angularfire 2和返回的数据是一个可观察的Event []数组。当我将返回更改为return (console.log({ ...event, attendingType: currentUser.type } as eventWithAttendance));时，它会打印附加属性。

这是界面

export interface Event {
  schoolId: string;
  eventId: string;
  name: string;
  date: Date;
  timeStart: number;
  timeEnd: number;
  volunteersRequired: boolean;
  attendance?: Array<EventUser>;
  imageUrl: string;
  contactName: string;
  contactPhone: number;
  contactEmail: string;
  description: string;
}

export interface EventUser {
  id: string;
  email: string;
  name: string;
  type: ATTENDANCE;
}

export enum ATTENDANCE {
  attending = 'attending',
  notAttending = 'notAttending',
  volunteering = 'volunteering'
}

这是ts文件的代码

interface eventWithAttendance extends Event {
  attendingType: ATTENDANCE;
}

ionViewDidLoad() {
    this.activeSchool = this.data.activeSchool;

    //this.events = this.data.getEvents(this.activeSchool.schoolId).pipe();

    this.auth.user.subscribe((user) => {
      this.user = user;
    });

    this.events = this.data.getEvents(this.activeSchool.schoolId)
      .pipe(
        map((events) => {
            events.map( (event) => {
              let currentUser = event.attendance.find(user => user.id === this.user.uid);
              if(currentUser) {
                return ({ ...event, attendingType: currentUser.type } as eventWithAttendance);
              } else {
                return event;
              }
            });

          return events as eventWithAttendance[];
        })
      );


    // Not a long term solution
    this.currentDate = new Date().getTime(); // so we don't display old events
  }

Answer 1

问题是数组上的.map不会更改原始数组，但会返回一个新数组。

所以，如果你改变：

events.map( (event) => {

至：

const updatedEvents = events.map( (event) => {

然后将return语句更改为：

return updatedEvents as eventWithAttendance[];