Angular：TypeError：无法读取未定义的属性“map”

Question

我正在使用MEAN Stack来构建评分应用程序。 我试图通过服务代码从数据库中获取项目列表到我的Angular组件，但我一直得到core.js:14597 ERROR TypeError: Cannot read property 'map' of undefined 。

//scoring.service.js
import { Scoring } from './scoring.model';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';


@Injectable({providedIn: 'root'})
export class ScoringService {
    private scoring: Scoring[] = [];
    private updatedScores = new Subject<Scoring[]>();

    constructor(private http: HttpClient, private router: Router){}

    getScoring() {
        this.http.get<{message: string,   scores: any}>('http://localhost:3000/api/scoring')
            .pipe(map((scoringData) => {
                return scoringData.scores.map(score => {
                    status = score.IsActive ? 'checked' : 'unchecked';
                    return {
                        id: score._id,
                        Criteria: score.Criteria,
                        MaxPoints: score.MaxPoints,
                        IsActive: status, 
                        DateCreated: score.DateCreated,
                        DateModified: score.DateModified
                    };
                });
            }))
            .subscribe((transformedScores) => {
                this.scoring = transformedScores;
                this.updatedScores.next([...this.scoring]);
            });
    }
}

代码应该列出项目，并分别将boolean字段从true或false映射到checked或unchecked。 但根本没有列出任何东西。 我得到的错误是"Cannot read property 'map' of undefined." 我在另一个组件中使用了相同的代码集来列出项而不会出现错误。 拜托，帮助我，我将不胜感激。 谢谢。

Answer 1

在pipe(map(scoringData))部分放置一些断点，看看你得到了什么。

抛出异常是因为你实际上假设“scoringData”返回一个这样形成的对象：

{"scores": [ << an array of something >> ]}

但是如果scoringData为null，则尝试将.map函数用于未定义的结果。

快速修复可以是：

.pipe(map((scoringData) => {
  return (scoringData && scoringData.scores || []).map(score => {
     status = score.IsActive ? 'checked' : 'unchecked';
     return {
         id: score._id,
         Criteria: score.Criteria,
         MaxPoints: score.MaxPoints,
         IsActive: status, 
         DateCreated: score.DateCreated,
         DateModified: score.DateModified
     };
   });
}))

更好的方法是在管道中使用地图之前过滤结果。

这取决于您使用的是哪个RxJS库，但通常情况下，您可以执行以下操作：

.pipe(filter(scoringData => !!scoringData && !!scoringData.scores && scoringData.scores.length), map((scoringData)

过滤器运算符的导入应与map运算符相同：

import { filter } from 'rxjs/operators';