Typescript с Angular HttpClient ErrorType ... не является функцией при вызове метода класса - PullRequest
Новая
       56

Typescript с Angular HttpClient ErrorType ... не является функцией при вызове метода класса

0 голосов
/ 25 мая 2018

Я сталкиваюсь с какой-то странной (для меня) проблемой с объектами и типами в машинописи / угловых.

У меня есть некоторый класс, описывающий мои объекты, полученные из удаленного 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 для одной из моих точек из массива 

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

Я получаю странную ошибку на консоли: 

ERROR TypeError: firstPoint.doSomething is not a function

Я не использую Typescript и Angular очень долго, поэтому я предполагаю, что с моим кодом что-то не так, но я не смог найти ответмоя проблема.Не могли бы вы дать мне совет?

1 Ответ

0 голосов
/ 25 мая 2018

Проблема в том, что вы на самом деле не получаете экземпляры Point от веб-службы.Вы получаете объект 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
            }
        );
}
...