{} 类型的参数不能分配给 [] 类型的参数

Question

I working in angular 2 at the moment, I get error after mapping data from backend, and try to call function. Error text below

Argument of type '{ date: Date; recipes: Recipe[]; }[]' is not assignable to parameter of type 'Day[]'.

The Day model looks like this:

import { Recipe } from "../recipes/recipe.model";

export class Day {
public date: Date;
public recipes :Recipe[]

constructor(date: Date, recipes ?: Recipe[]) {
    this.date = date;
    this.recipes = recipes;
  }

getDate(){
    return this.date;
  }
}

Error occurred in setDays method, the passed parameter is invalid.

loadDays() {
    return this.http.get<Day[]>(
        this.urlDays,
    ).pipe(
        map((days => {
            return days.map(day => {
                return {
                    ...day,
                    recipes: day.recipes ? day.recipes : []
                };

            });
        })),
        tap(days => {
            this.daysService.setDays(days);
        }),
    );
}

In this part of code:

return {
                    ...day,
                    recipes: day.recipes ? day.recipes : []
                };

I check if data i get have recipes if they have i don't chenge recipe, and if i don't have recipe i add empty array of type Recipe.

DaysService code:

import { Injectable } from "@angular/core";
import { Subject } from "rxjs";

import { Day } from "./day.model";

@Injectable()
export class DaysService {

  private startDate: Date = new Date(new Date().getTime());
  private dayLongInMS: number = 86400000;
  private daysShown: Array<Day> = [];
  daysChanged = new Subject<Day[]>();

  getDays() {
        return this.daysShown.slice();
  }

  setDays(days: Day[]) {
        this.daysShown = days;
        this.daysChanged.next(this.daysShown.slice());
    }

I think i need some method to grouped back this 2 parameters after divided it be operator triple dot (date: Date; recipes: Recipe[];) to one (Day[]) property.

I find similar problem here: Argument of type {...} is not assignable to parameter of type [ ] But I don't know how to use it me case. Can you give me some advice?

Answer 1

You are not returning instances of the Day class. The http client doesn't create Day instances just because they're given as the generic type. And the compiler is complaining because you are creating objects that don't conform to the interface of the Day class.

Instead, you will need to create Day instances in the map operator.

loadDays() {
  return this.http.get(this.urlDays).pipe(
    map((response: any) => {
      return response.map(day => new Day(day.date, day.recipes || []));
    }),
    tap(days => {
      this.daysService.setDays(days);
    }),
  );
}

If you want to ensure that Day instances are always initialised with a non-null recipes , you should handle that in your constructor rather than relying on the calling code.

export class Day {
  public date: Date;
  public recipes :Recipe[]

  constructor(date: Date, recipes ?: Recipe[]) {
    this.date = date;
    this.recipes = recipes || [];
  }

  getDate(){
    return this.date;
  }
}