Angular：TypeError：无法读取未定义的属性“地图”答案

【问题标题】：Angular: TypeError: Cannot read property 'map' of undefinedAngular：TypeError：无法读取未定义的属性“地图”
【发布时间】：2019-10-18 21:14:04
【问题描述】：

我正在使用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 分别映射到选中或未选中。但根本没有列出任何内容。我得到的错误是"Cannot read property 'map' of undefined." 我在另一个组件中使用了相同的代码集来列出项目而没有得到错误。请在这里帮助我，我将不胜感激。谢谢。

【问题讨论】：

您好“user2997304”，欢迎来到 StackOverflow！您能否指定您正在使用的 RxJS 版本并提供Minimal, Reproducible Example，以便我们帮助您追踪您面临的问题？
你能告诉我们scoringData里面有什么吗？很可能您在获取数据时缺少属性 scores。
您的 scoringData.scores 未定义仔细检查您的 api 的响应
我检查了我的scoringData.scores，它实际上返回了响应

标签： node.js angular mdbootstrap

【解决方案1】：

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

抛出异常是因为您实际上假设“scoringData”返回的对象格式如下：

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

但如果scoringData 为空，您尝试使用.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';

【讨论】：