如何将对象推送到 angular2 和打字稿中的数组？

Question

我定义了一个数组如下，

markers: marker[] = [
    {
      lat: 51.673858,
      lng: 7.815982,
      label: 'A',
      draggable: true
    }
  ];

我正在从休息服务获取数据并将新对象推送到标记。

private data: any;
  findLocation(): void {
    let result;
    result =   this.geoService.loaddata(this.location)
     .subscribe(data => {
       result = data;
       console.log(result);
       this.markers.push({'lat':results[0].geometry.location.lat,'lng':results[0].geometry.location.lng})
     });
  }

它抛出一个错误说文件：

message: 'Argument of type '{ 'lat': any; }' is not assignable to parameter of type 'marker'. Property 'lng' is missing in type '{ 'lat': any; }'.'

结果是

{ "results" : [ { "address_components" : [ { "long_name" : "Colombo", "short_name" : "Colombo", "types" : [ "locality", "political" ] }, { "long_name" : "Colombo", "short_name" : "Colombo", "types" : [ "administrative_area_level_2", "political" ] }, { "long_name" : "Western Province", "short_name" : "WP", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "Sri Lanka", "short_name" : "LK", "types" : [ "country", "political" ] } ], "formatted_address" : "Colombo, Sri Lanka", "geometry" : { "bounds" : { "northeast" : { "lat" : 6.9812866, "lng" : 79.8900852 }, "southwest" : { "lat" : 6.862390700000001, "lng" : 79.8223258 } }, "location" : { "lat" : 6.9270786, "lng" : 79.861243 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 6.980584400000001, "lng" : 79.8900852 }, "southwest" : { "lat" : 6.8625113, "lng" : 79.8225192 } } }, "place_id" : "ChIJA3B6D9FT4joRjYPTMk0uCzI", "types" : [ "locality", "political" ] } ], "status" : "OK" }

Answer 1

看起来你有一个简单的错字：

this.markers.push({
    'lat': results[0].geometry.location.lat,
    'lat': results[0].geometry.location.lng
})

应该是：

this.markers.push({
    'lat': results[0].geometry.location.lat,
    'lng': results[0].geometry.location.lng
})

Answer 2

首先，你打错了，你访问了一个名为 results 的变量，但只有 result.

其次，那个结果变量没有什么意义。试试这个：

// private data: any; // Remove this field
findLocation(): void {
    // no result variable here
    this.geoService.loaddata(this.location)
    .subscribe(results => { // declare results this way
        console.log(results);
        this.markers.push({
          'lat':results[0].geometry.location.lat,
          'lnt':results[0].geometry.location.lng
        });
    });
}

Answer 3

您已将数据订阅到 result，而不是 results。

private data: any;
  findLocation(): void {
    let result;
    // no use for "result" below
    // result = this.geoService.loaddata(this.location)
    // use the following instead
    this.geoService.loaddata(this.location)
     .subscribe(data => {
       result = data;
       console.log(result);
       this.markers.push({'lat':results[0].geometry.location.lat,'lng':results[0].geometry.location.lng})
     });
  }

因此您的推送应该如下所示：

this.markers.push({'lat':result[0].geometry.location.lat,'lng':result[0].geometry.location.lng})
         });

但这也会引发错误，因为在标记中您还声明了 label 和 draggable，因此您也需要将值推送到这些属性。

Answer 4

    this.geoService.loaddata(this.location)
       .subscribe(data => {
       result = data;
       this.markers.push({'lat':data.geometry.location.lat,'lng':data.geometry.location.lng})
    });

如何将对象推送到 angular2 和打字稿中的数组？

How to push an object to array in angular2 and typescript?

typescript

typescript2.0

angular