Angular: TypeError: Невозможно прочитать свойство 'map' из неопределенного - PullRequest
Новая
       16

Angular: TypeError: Невозможно прочитать свойство 'map' из неопределенного

0 голосов
/ 03 июня 2019

Я использую 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." И я использовал тот же набор кода в другом компоненте, чтобы перечислять элементы без получения ошибки. Пожалуйста, помогите мне здесь, я буду признателен. Благодаря.

1 Ответ

0 голосов
/ 03 июня 2019

Поместите несколько точек останова в часть 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)

И импорт оператора фильтра должен совпадать с оператором карты:

import { filter } from 'rxjs/operators';

...