无法读取未定义的属性'...'

Question

我正在使用Native Google Maps和Firebase构建一个Ionic应用程序。我有这个Firebase结构：

我正试图通过他们的ID来获取这些属性。所以，我创建了一个提供程序和一个函数getLocalDetail()：

import { ... };

@Injectable()

export class LocalProvider {

  constructor(public afd: AngularFireDatabase) {

  }

  getLocalDetail(localId): Promise<any> {
    return new Promise(resolve => {
      this.afd.list('/local/'+localId).subscribe(data => {
        resolve(data);
      })
    })
  }

}

我正试图在我的页面中显示这些属性：

import { ... };

@IonicPage()

@Component()

export class LocalPage {

  public localRef: FirebaseListObservable<any[]>;

  constructor(..., public localProvider: LocalProvider) {

  }

 ionViewDidEnter(){
    this.localProvider.getLocalDetail(this.navParams.get('localId')).then(data => {
      this.localRef = data;   
    });
  }

}

这是HTML：

<p>Latitude: <strong>{{localRef.latitudeLocal}}</strong></p>
<p>Longitude: <strong>{{localRef.longitudeLocal}}</strong></p>

但结果是错误Cannot read property 'latitudeLocal' of undefined。我相信我的功能不是检索数据......任何人都可以帮助我吗？