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

回答 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
                }
            );
    }
    
    

あなたの答え