Hur returnerar jag en nästlad objektarray med en Signal i Angular/Typescript?


I min Angular/Typescript-kod har jag en nästlad objektsarray som jag försöker returnera (filtrera) baserat på objektets egenskap som har value === 'event'.

Jag vet inte vad jag saknar, men av någon anledning returnerar det inte den nästlade objektarrayen utan fortsätter istället att säga att min variabel är av typen CalendarModel[] vilket är föräldern.

Jag lade till :{types} till variablerna/filtren för att visa dig vad Angular talar om för mig att variabeltyperna är.

getAllEvents: Signal<CalendarModel[]> = computed(() => this.dataService.allInformation()?.allCalendarInformation?.filter(calendar: CalendarModel => calendar?.events?.filter(event: CalendarEvent=> event.type === 'event').filter(event: CalendarEvent => {
    return new Date(event.date).getTime() >= new Date().setHours(0, 0, 0, 0);
  }))
);

Här är min modellstruktur:

allCalendarInformation: CalendarModel[];
export interface CalendarModel {
  date: Date;
  events: CalendarEvent[];
}
export interface CalendarEvent {
  imageUrl?: string
  title: string;
  date?: Date;
  location?: string;
  time?: string;
  description: string;
  type?: string;
  featured?: boolean;
}

Missar jag något?

Jag borrar ner i händelser och försöker få alla händelser som har type === 'event' men Typescript fortsätter säga att mitt övergripande objekt från getAllEvents är av typen CalendarModel[]. Ska det inte vara CalendarEvent[]?

Snälla hjälp mig att förstå vad jag gör fel.

Jag har flera andra filtrerade objekt i hela mitt projekt och de fungerar, men jag gör något fel här.

Svar #1

  1. Iterera alla CalendarModel-objekt och kombinera CalendarEvent till en array via .reduce().

  2. Filtrera CalendarEvent-objektet efter type och date.

getAllEvents: Signal<CalendarEvent[]> = computed(() =>
  this.dataService.allInformation()
    ?.allCalendarInformation
    ?.reduce(
      (acc: CalendarEvent[], cur: CalendarModel) => [...acc, ...cur.events],
      [] as CalendarEvent[]
    )
    .filter(
      (event: CalendarEvent) =>
        event.type === 'event' &&
        event.date &&
        new Date(event.date).getTime() >= new Date().setHours(0, 0, 0, 0)
    ))
);

Demo @ StackBlitz

Svar #2

Detta beror på att filtermetoden körs ovanpå CalendarModel som är en array av arrayer. Du måste tillämpa någon reducer eller map och göra så att denna array får en dimension.

Sedan, när du har den här enda arrayen, kan du filtrera objektet efter egenskapen typ.