角度日历异步http'map'未定义 [英] Angular calendar async http 'map' of undefined

问题描述

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

I try to install the angular calendar in my app, I have the data of the events in the database, but when I try to call them I get an error:

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 示例效果很好时，它会显示所有数据。但是当我更改网址并删除参数，通过我的网址 http：// localhost：3000 / consulta 它不能以相同的方式工作，日历不会呈现并抛出 map 错误，正如您所看到的，地图包含在上面。

When I use the .get example works well, it shows me all the data. But when I change the url and remove the parameters, by my url http://localhost:3000/consulta it does not work in the same way, the calendar is not rendered and throws the map error and as you can see, the map is included above.

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

Adding, my consulta.service.ts has this function to bring all the data. How could I subscribe and display the data as the example using my service?

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

    return this.http.get(url);
  }

我希望你能引导我找到解决方案。谢谢！

I hope you can guide me to the solution. Thanks!

我更改了行

map（（{results}：{results：any [ ]}）=> {

map（（结果： Consulta []）=> {

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

and now I get the data from http, but new error appears:

错误TypeError：results.map不是函数

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

The error continues referring to the line that you mark in the code above

推荐答案

回答更新的问题

这是因为webservice返回的json不是 Consulta 的数组，而是一个的对象consultats properties是一个数组。所以，在你的订阅中，结果不是一个数组

That's because the json returned by the webservice is no an array of Consulta, but an object which consultats properties is an array. So, in your subscribe, results is not an array

你需要将htpp调用的返回值映射（使用observable的map方法）

You need to map (using observable's map method) the returned value from the htpp call to an array

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

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

Or you can directly access the correct property in the subscribe method

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

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

原始问题的答案

如果声明map参数就像你最初做的那样，这意味着http调用返回一个对象，带有一个 result 属性，如果一个数组

If you declare the map parameter like you originally did, this means that the http call returns an object, with a result property which if an array

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

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

From the json you provided, this is not the case. The consultas property contains the array. So it should be:

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

这篇关于角度日历异步http'map'未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！