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フィールドをそれぞれチェック済みtrueまたはfalseチェックなしにマップすることになっています。しかし、何もリストされていません。私が得ているエラーは"Cannot read property 'map' of undefined."、別のコンポーネントで同じコードセットを使用して、エラーを発生させずにアイテムをリストしました。ここで私を助けてください、感謝します。ありがとう。

4

1 に答える 1

0

パーツにいくつかのブレークポイントを配置して、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';

于 2019-06-03T10:30:01.580 に答える