arrays - 未定义的 Angular 日历异步 http 'map'

Question

我尝试在我的应用程序中安装 Angular 日历，我在数据库中有事件数据，但是当我尝试调用它们时出现错误:

ERROR TypeError: Cannot read property 'map' of undefined at MapSubscriber.eval

原始代码在这里:https://mattlewis92.github.io/angular-calendar/#/async-events

我的component.ts:

import { Component, ChangeDetectionStrategy, ViewEncapsulation, OnInit } from '@angular/core';
import { ConsultaService } from '../../services/consulta/consulta.service';
import { Consulta } from '../../models/consulta.model';

//calendar imports
import { HttpClient } from '@angular/common/http';
import { CalendarEvent } from 'angular-calendar';
import { map } from 'rxjs/operators/map';
import { Observable } from 'rxjs/Observable';
import {
  /* ... */
} from 'date-fns';

const colors: any = {
  /* ... */
};

@Component({
  selector: 'app-turnos',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './turnos.component.html',
  styleUrls: ['./turnos.component.min.css'],
  encapsulation: ViewEncapsulation.None
})
export class TurnosComponent implements OnInit {

  activeDayIsOpen: boolean = false;
  view: string = 'month';
  viewDate: Date = new Date();

  events$: Observable<Array<CalendarEvent<{ consulta: Consulta }>>>;

  constructor(
    private http: HttpClient,
    public _consultaService: ConsultaService,
  ) {}

  ngOnInit(): void {
    this.fetchEvents();
  }

  fetchEvents(): void {
    const getStart: any = {
      month: startOfMonth,
      week: startOfWeek,
      day: startOfDay
    }[this.view];

    const getEnd: any = {
      month: endOfMonth,
      week: endOfWeek,
      day: endOfDay
    }[this.view];

    this.events$ = this.http
      .get('http://localhost:3000/consulta')
      .pipe(
        map(({ results }: { results: any[] }) => {
          return results.map((consulta: any) => { // <--- error line
            return {
              title: consulta.tratamiento_c,
              start: new Date(consulta.date_a),
              color: colors.yellow,
              meta: {
                consulta
              }
            };
          });
        })
      );
  }

  dayClicked({
    /* ... */
  }

  eventClicked(event: CalendarEvent<{ consulta: Consulta }>): void {
    /* ... */
  }

}

当我使用 .get 示例时效果很好，它向我显示了所有数据。但是当我更改 url 并删除参数时，通过我的 url http://localhost:3000/consulta 它不会以相同的方式工作，日历不会呈现并抛出 map 错误，如您所见， map 包含在上面。

补充一下，我的consulta.service.ts有这个功能可以把所有的数据都带过来。我如何使用我的服务订阅和显示数据作为示例？

  cargarConsultas() {
    let url = URL_SERVICIOS + '/consulta';

    return this.http.get(url);
  }

希望您能指导我找到解决方案。谢谢!

更新

我换了行

map(({ results }: { results: any[] }) => {

对于

map(( results: Consulta[] ) => {

现在我从 http 获取数据，但是出现了新的错误:

错误类型错误:results.map 不是函数

错误继续引用您在上面代码中标记的行

Answer 1

更新问题的答案

因为webservice返回的json不是Consulta的数组，而是consultats属性的对象是数组。因此，在您的订阅中，results 不是数组

您需要将 htpp 调用的返回值映射(使用 observable 的 map 方法)到一个数组

cargarConsultas() : Observable<Consulta[]> 
{
   let url = URL_SERVICIOS + '/consulta';
   return this.http.get(url).map(res => res.consultas);
}

或者您可以直接在订阅方法中访问正确的属性

cargarConsultas() {
 let url = URL_SERVICIOS + '/consulta';
 return this.http.get(url);
}

map(( results: any ) => 
{
return results.consultas.map(

原始问题的答案

如果你像原来那样声明 map 参数，这意味着 http 调用返回一个对象，带有一个 result 属性，如果是一个数组

 map(({ results }: { results: any[] }) 

从您提供的json来看，情况并非如此。 consultas 属性包含数组。所以应该是:

 map(({ consultas }: { consultas: Consulta[] }) => {
      return consultas.map((consulta: Consulta)  => {
        return {
          title: consulta.tratamiento_c,