Используя метод Map () в TypeScript Angular, возвращает массив Observable в функции

Question

У меня есть этот метод в моем сервисе:

getPriceRules(): Observable<PriceRule[]> {
   return this.http.get<PriceRule[]>(this.url)
   .map(response => PriceRule.fromJson(response));
}

Моя ошибка:

Type 'Observable<PriceRule>' is not assignable to type 'Observable<PriceRule[]>'.
Type 'PriceRule' is missing the following properties from type 'PriceRule[]': length, pop, push, concat, and 26 more.

В моем методе getPricesRules() я хочу получить все PriceRule, что http.get возвращает меня и применить мою функцию fromJson в каждом PriceRule

export class PriceRule {
  public static fromJson(json: Object): PriceRule {
    return new PriceRule(
       json['id'],
       json['activity'],
       json['duration'],
       json['is_indoor'],
       json['surface'],
       json['hour_start'],
       json['hour_end'],
       json['price'],
       json['currency'],
       json['weekdays']
    );
  } 

  constructor(
        public id: string,
        public activity: string,
        public duration: number,
        public is_indoor: boolean,
        public surface: string,
        public hour_start: string,
        public hour_end: string,
        public price: number,
        public currency: string,
        public weekdays: number[]
    ) {}
}

Answer 1

Вы путаете Observable map с массивом map:

.map(response => response.map((line) => PriceRule.fromJson(line));

Карта rxjs отображает ваш ответ на другое значение, оттуда вам нужно взять свой массив и сопоставить его с PriceRule.

Другой способ сделать это, который не требует вашего fromJson метода:

.map(response => response.map((line) => Object.assign(new PriceRule(), line));

Другой способ - сделать PriceRule интерфейсом, если вы сделаете это, вам не понадобится отображение:

return this.http.get<PriceRule[]>(this.url);

_{примечание: попробуйте обновить до последней версии rxjs> = 6. При этом вы должны использовать функцию .pipe с операторами}

Answer 2

Когда вы говорите getPriceRules(): Observable<PriceRule[]>, это означает, что метод getPriceRules возвращает Observable, который вернет PricesRule[] (массив правил цены).Когда вы вызываете map для этого Observable, он пытается применить функцию map к массиву PriceRule (PriceRule []), а не к каждому объекту PriceRule.Кроме того, преобразование JSON в объект выполняется Angular автоматически.Итак, удалите функцию карты.

Answer 3

Удалить карту

.map(response => PriceRule.fromJson(response));

Angular HttpClient справится с этим за вас