Typescript 将 JSON 对象转换为 Typescript 类答案

【问题标题】：Typescript converting a JSON object to Typescript classTypescript 将 JSON 对象转换为 Typescript 类
【发布时间】：2017-04-29 07:19:22
【问题描述】：

您好，我正在尝试将 JSON 对象数组更改为 TypeScript 类。但是，每次我尝试将 Json 对象属性分配给打字稿属性时，该方法似乎都会崩溃。

打字稿界面

export interface marker {
    lat: number;
    lng: number;
}

打字稿方法

public markers: marker[];

ngOnInit() {
    this.mapService.GetPhotosById(this.id).subscribe(resultlisting => {
        this.values = resultlisting;
        console.log(this.values); //SHOW IN PICTURE
        this.ChangetoMarkers(this.values);
    }, error => this.errorMessage = error);
}

ChangetoMarkers(someArray: Observable<any[]>) {

    for (let entry of someArray) {
        let mark: marker;
        mark.lat = Number(entry.latitude); //Attempt to convert to number
        mark.lng = +entry.longitude; //2nd attempt to convert to number
        this.markers.push(mark);
    };
    console.log(this.markers); //DOES NOT REACH THIS
}

地图服务

GetPhotosById(id: string): Observable<any> {
    return this.http
        .post(this.config.apiEndpoint + "mapPhotos/" + id)
        .map(this.extractJson).catch(this.handleErrors);

};
private extractJson(res: Response) {
    let data = res.json();
    return data;
}
private handleErrors(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    console.log(errMsg);
    return Observable.throw(errMsg);
}

我已经研究过这个问题并尝试应用整数转换，但它似乎不起作用。任何建议都会很棒。

【问题讨论】：

那些不是“JSON 对象”而是 javascript 对象。有没有抛出异常？
你试图将属性分配给一个没有值的变量，改为let mark: marker = {}
没有意外抛出异常
好的，我马上试试
知道了。我很感激这个建议。打字稿很新

标签： json angular typescript

【解决方案1】：

正如 Mauricio Poppe 在他的评论中指出的那样，您正在尝试访问没有值的变量的属性。

changeToMarkers(points: Array<{latitude: number, longitude: number}>) {
  this.markers = entries.map(({latitude: lat, longitude: lng}) => ({
    lat,
    lng
  }));

  console.log(this.markers);
}

不需要数字转换，因为纬度和经度的反序列化表示已经是兼容的数值。

【讨论】：

没有到达console.log(this.markers)语句。
@RyeGuy 会发生什么？它是否达到订阅？注意我为了约定稍微改变了名字，一定要更新你的模板（或者把名字改回来；））
非常感谢您的帮助。但是它似乎没有达到订阅。我将参数改回 Observable
@RyeGuy 该类型根本不会改变运行时行为。您可以将调用changetoMarkers 的代码添加到您的问题中吗？需要更多上下文。
@RyeGuy 查看更新后的答案。如果这不起作用，那么您的反应会与您想象的不同。

【解决方案2】：

试试这个：

ChangetoMarkers(someArray: any[]) {
    console.log("array",someArray);
    for (let entry of someArray) {
        let mark: marker = {lat: entry.latitude, lng: entry.longitude};
        console.log("mark", mark);
        this.markers.push(mark);
    };
    console.log("markers",this.markers); 
}

它不像 Aluan Haddad 那样优雅，但它应该允许您确定如果由于某种原因仍然无法正常工作，它会在哪个点中断，方法是在循环之前记录 someArray，在被推送之前记录标记，然后 this.markers 确定问题出在哪里。

【讨论】：