我尝试在我的应用程序中安装 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 不是函数
错误继续引用您在上面代码中标记的行
最佳答案
更新问题的答案
因为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,
关于arrays - 未定义的 Angular 日历异步 http 'map',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49645426/