javascript - Angular 2 - 推送到要使用 *ngFor 显示的数组时出错

Question

我想使用 *ngFor 显示通过 Angular 2(特别是 Ionic 2)中的 Google 地理编码器收到的项目列表。

地址模态.html

<ion-content class="address-modal">
  <ion-searchbar id="pac" [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="#address of addresses">
      {{ address }}
    </ion-item>
  </ion-list>
</ion-content>

地址模态.ts

import {Page, NavController, ViewController} from 'ionic-angular';
import {ViewChild} from 'angular2/core';

declare var google: any;


@Page({
  templateUrl: 'build/pages/address-modal/address-modal.html',
})
export class AddressModal {

  searchQuery: string = '';
  geocoder: any;
  addresses: any = [];

  constructor(public nav: NavController, public view: ViewController) {
    this.geocoder = new google.maps.Geocoder();
  }

  getItems(searchbar) {

    this.geocoder.geocode({ 'address': searchbar.value }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        console.log('len ' + results.length);
        console.log(results);

        for(var i = 0; i < results.length; i++) {
          this.addresses.push(results.formatted_address);
        }

      } else {
        console.error("Geocode was not successful for the following reason: " + status);
      }
    });
  }

地理编码器成功返回包含结果的列表，我将其显示在控制台中，但 Chrome 立即阻止执行并显示以下错误:

address-modal.ts:45 Uncaught TypeError: 无法读取未定义的属性“地址”

指向该线

this.addresses.push(results.formatted_address);

我想在模板上的 *ngFor block 中显示 formatted_addresses 列表。 (我不想使用 Google 的自动完成搜索框)

Answer 1

你需要改变

function (results, status)

至

(results, status) =>

否则 this 将不会指向 AddressModal 实例，而是指向回调函数本身。

有关更多详细信息，请参阅https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions