时间戳

首页 > 解决方案 > map 不是 Angular 5 中的函数

angular - map 不是 Angular 5 中的函数

问题描述

我正在尝试获取两个日期之间的值。在服务器端它工作正常，但在前端它向我显示错误，因为birthdays.map 不是一个函数

生日服务.ts

    import {Observable} from 'rxjs/Observable';
    import * as moment from 'moment';
    import 'rxjs/add/operator/map';
    import {HttpClient, HttpParams} from '@angular/common/http';
    import {map} from 'rxjs/operators';

   getbirthdays(start?: moment.Moment, end?: moment.Moment): 
   Observable<birthday[]> {
        let params = new HttpParams();

        if (start) {
          params = params.append('start', start.toISOString());
        }

        if (end) {
          params = params.append('end', end.toISOString());
        }

        return this.http.get('/api/birthday', {params: params}).pipe(
          map(res => res as Object[] || []),
          map(birthdays => birthdays.map(k => new birthday(
            k['_id'],
            new Date(k['datetime']),
            k['gift']))
          )
        );
      }

浏览器控制台中的错误

core.js:1350 错误类型错误：birthdays.map 不是 MapSubscriber.project (birthday.service.ts:28) 中 MapSubscriber.webpackJsonp.../../../../rxjs/_esm5/internal 的函数/operators/map.js.MapSubscriber._next (map.js:35) 在 MapSubscriber.webpackJsonp.../../../../rxjs/_esm5/internal/Subscriber.js.Subscriber.next（订阅者。 js:54) 在 MapSubscriber.webpackJsonp.../../../../rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41) 在 MapSubscriber.webpackJsonp... /../../../rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) 在 MapSubscriber.webpackJsonp.../../../../rxjs/_esm5 /internal/operators/map.js.MapSubscriber._next (map.js:41) 在 MapSubscriber.webpackJsonp.../../../../rxjs/_esm5/internal/Subscriber.js.Subscriber.next ( Subscriber.js:54) 在 FilterSubscriber。webpackJsonp.../../../../rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38) 在 FilterSubscriber.webpackJsonp.../../../ ../rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) 在 MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/internal/operators/mergeMap。 js.MergeMapSubscriber.notifyNext

标签： angularresttypescriptangular5

解决方案

Typescript 的类型检查仅适用于编译时，因为它最终编译为 JavaScript，所有类型仅供开发人员参考，因为 Typescript 没有运行时类型检查/强制转换功能

这就是为什么map(res => res as Object[] || [])不会将响应投射到Array它只会告诉 IDE 响应数据是什么类型（仅供您参考），它不会修改数据本身（您可以将 res 定义为Object[]，但如果后端发送给您,Object无论如何你都会得到相同的对象。

如果你想使用Array.prototype.map你需要手动解析对 的响应Array。

你应该删除第一个map()，因为它什么都不做，并debugger;在第二个中设置，看看你得到了什么数据。

推荐阅读