0

我正在使用MEANStack 构建评分应用程序。我正在尝试通过服务代码将数据库中的项目列表获取到我的 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字段。但根本没有列出任何内容。我得到的错误是并且我在另一个组件中使用了相同的代码集来列出项目而没有收到错误。请在这里帮助我，我将不胜感激。谢谢。truefalse"Cannot read property 'map' of undefined."

4

1 回答 1

0

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

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

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

但如果 scoreData 为 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)

并且过滤器运算符的导入应该与映射运算符相同：

import { filter } from 'rxjs/operators';

于 2019-06-03T10:30:01.580 回答