1

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

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 并删除参数时，通过我的 urlhttp://localhost:3000/consulta它不能以相同的方式工作，日历不会呈现并引发map错误，如您所见，地图包含在上面。

添加，我consulta.service.ts有这个功能来带来所有的数据。如何使用我的服务订阅和显示数据作为示例？

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

    return this.http.get(url);
  }

我希望你能指导我解决问题。谢谢！

更新

我换了行

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

为了

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

现在我从 http 获取数据，但出现新错误：

ERROR TypeError: results.map is not a function

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

4

1 回答 1

2

回答更新的问题

那是因为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,
于 2018-04-06T07:06:14.787 回答