Angular HttpClient ErrorType…を持つタイプスクリプトは、クラスメソッドを呼び出すときの関数ではありません

bugfix> typescript > 投稿

typescript/angularのオブジェクトと型に関する奇妙な（私には）問題に直面しています。

リモートAPIから受け取ったオブジェクトを記述するクラスがあります。

export class Point {
    lat:number;
    lng:number;
    name:string;
    public doSomething() {
        console.log("doSomething called");
    }
}

私は HttpClient を使用していますAPIからオブジェクトを取得するには：

constructor(private http:HttpClient) {}
getPointsAsync(callback: (points: Point[]) => {}) {
    this.http.get<Point[]>(`${environment.apiUrl}/api/points`)
    .subscribe(
        (result: Point[]) => {
            //do something with data
            callback(result);
        },
        error => { //some error handling
        }
    );
}

私の問題は、メソッド doSomething を呼び出そうとすると配列から私のポイントの1つに

var firstPoint = points[0];
firstPoint.doSomething()

コンソールに奇妙なエラーが表示されます：

ERROR TypeError: firstPoint.doSomething is not a function

TypescriptとAngularを非常に長い間使用していないため、コードに何か問題があると考えていますが、問題の答えが見つかりませんでした。アドバイスをお願いします。

typescript

typescript2.0

angular-httpclient

回答 1 件

  • 問題は、実際に Point のインスタンスを取得しないことです  Webサービスから。メソッドではなくクラスフィールドを持つJSONオブジェクトを取得します。クラスをインスタンス化して Object.assign を使用できます  オブジェクトリテラルから各 Point に値を割り当てる  インスタンス

    getPointsAsync(callback: (points: Partial<Point>[]) => {}) {
    this.http.get<Point[]>(`${environment.apiUrl}/api/points`)
        .subscribe(
            (result: Partial<Point>[]) => {
                let points = result.map(p=> Object.assign(new Point(), p));
                callback(points);
            },
            error => { //some error handling
            }
        );
}

あなたの答え

関連記事