使用 localStorage 时出现奇怪的打字稿错误

Question

我正在为一个高级设计项目工作，并且遇到了一些奇怪的 typeScript 错误。我正在使用打字稿 2.3.4。

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth'
import { LoginPage } from '../login/login'
import { AngularFireDatabase, FirebaseObjectObservable} from "angularfire2/database-deprecated";
import * as firebase from 'firebase';
import { AlertController } from 'ionic-angular';
/**
 * Generated class for the Profile page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {
  userID: string;
  userProfile: FirebaseObjectObservable<any>;
  profiles: FirebaseObjectObservable<any>;
  public profile = {};
  public items: Array<any> = [];
  constructor(public navCtrl: NavController, private afAuth: AngularFireAuth,        public af: AngularFireDatabase) {
      this.afAuth.authState.subscribe(user => {
      if(user) this.userID = user.uid;
      this.userProfile = af.object(`userProfile/${user.uid}`);
      this.profiles = af.object(`profiles/${user.uid}/`);
    });
  }

    ionViewDidLoad() {
    console.log('ionViewDidLoad Profile');
    var tmp1='', tmp2='', tmp3='', tmp4='', tmp5 = '';
    const personRef: firebase.database.Reference =    firebase.database().ref(`profiles/${this.userID}`);
    const personRefCheck: firebase.database.Reference = firebase.database().ref(`profiles/${this.userID}`);
    console.log("personRefCheck: "+personRefCheck);
    personRefCheck.on('value', checkSnapshot => {
      if(!checkSnapshot.val()) {
        console.log("!checkSnapshot");
        //Sets the local variables on load if the profile is null.
        localStorage.setItem('Pname', tmp1);
        localStorage.setItem('Page', tmp2);
        localStorage.setItem('Pabout', tmp3);
        localStorage.setItem('Plocation', tmp4);
        localStorage.setItem('Prating', tmp5);
        }

      else {
        personRef.on('value', personSnapshot => {
          console.log("personalSnapshot");
          this.profiles = personSnapshot.val();
          console.log(this.profiles.name);
          //Sets the variables to the values from database when the page loads
          localStorage.setItem('Pname', this.profiles.name);
          localStorage.setItem('Page', this.profiles.age);
          localStorage.setItem('Pabout', this.profiles.about);
          localStorage.setItem('Plocation', this.profiles.location);
          localStorage.setItem('Prating', this.profiles.rating);
         });
      }
    });
  }

  submitProfileChanges(name, age, about, location, rating) {
     //theoretically should have a .then() promise
     //push a newTask to the 'tasks' database and set the owner and name
     var var1, var2, var3, var4, var5;
     //Variables set to local localStorage
     var1 = localStorage.getItem('Pname');
     var2 = localStorage.getItem('Page');
     var3 = localStorage.getItem('Pabout');
     var4 = localStorage.getItem('Plocation');
     var5 = localStorage.getItem('Prating');

     //If input is is null, sets the input equal to the database, then passes that back to the database
     if(name == undefined){
       name = var1;
     }
     if(age == undefined){
       age = var2;
     }
     if (about == undefined){
       about = var3;
     }
     if (location == undefined){
       location = var4;
     }
     if (rating == undefined){
       rating = var5;
     }
     //Pushes the profile update to the database
     var profUpdate = this.profiles.update({
       name,
       age,
       about,
       location,
       rating
    });
    alert("Profile Updated!");
  }

  logoutUser() {
     this.navCtrl.setRoot(LoginPage);
  }
}

这是导致问题的代码部分。这是我在提供此未注释时遇到的错误。 “FirebaseObjectObservable”类型上不存在属性“名称”我收到此年龄、关于、位置和评级的错误。

localStorage.setItem('Pname', this.profiles.name);
localStorage.setItem('Page', this.profiles.age);
localStorage.setItem('Pabout', this.profiles.about);
localStorage.setItem('Plocation', this.profiles.location);
localStorage.setItem('Prating', this.profiles.rating);

如果我将上面的 sn-p 代码注释掉，程序将在终端行中使用 ionic serve 进行编译。 最重要的是，服务后，我可以取消注释被注释掉的代码，程序将自行重建并完美运行。

运行 ionic info 会输出以下内容：

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node  : v9.9.0
    npm   : 4.6.1 
    OS    : macOS High Sierra
    Xcode : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro    

Answer 1

错误信息告诉你应该知道的一切。你早了一步。

personSnapshot 是一个 FirebaseObjectObservable，其中包含您要访问的对象。但是要获得这个对象，你必须先订阅 FirebaseObjectObservable！

试试这个方法：

else {
  personRef.on('value', personSnapshot => {
    console.log("personalSnapshot");

     personSnapshot.subscribe(dbObject => {

        console.log(dbObject.name);
        //Sets the variables to the values from database when the page loads
        localStorage.setItem('Pname', dbObject.name);
        localStorage.setItem('Page', dbObject.age);
        localStorage.setItem('Pabout', dbObject.about);
        localStorage.setItem('Plocation', dbObject.location);
        localStorage.setItem('Prating', dbObject.rating);

     });

  });
}