Question

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

UPDATE

原始代码在此处：https://mattlewis92.github.io/angular-calendar/#/async-events

我的 component.ts ：

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

当我使用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具有此功能以带来所有数据。我如何使用我的服务订阅并显示数据作为示例？

consulta.service.ts

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

更新

我改变了行

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

的

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

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

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

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

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);
}

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

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,

角度日历异步http'map'未定义

更新

1 个答案: