Angular 使用Promise在页面上以角度和离子显示用户信息时出现以下错误

在我的应用程序和

accountsetingspage

上，我从

SQLite DB

获取用户数据，并将其显示在

Ionic

页面上。然而，我得到了这个错误

错误：

TypeError: Cannot read property 'name' of undefined
    at Object.eval [as updateRenderer] (ng:///AppModule/AccountSettingsPage.ngfactory.js:87:37)
    at Object.debugUpdateRenderer [as updateRenderer] (http://192.168.0.4:8100/build/vendor.js:15109:21)
    at checkAndUpdateView (http://192.168.0.4:8100/build/vendor.js:14223:14)
    at callViewAction (http://192.168.0.4:8100/build/vendor.js:14569:21)
    at execComponentViewsAction (http://192.168.0.4:8100/build/vendor.js:14501:13)
    at checkAndUpdateView (http://192.168.0.4:8100/build/vendor.js:14224:5)
    at callViewAction (http://192.168.0.4:8100/build/vendor.js:14569:21)
    at execEmbeddedViewsAction (http://192.168.0.4:8100/build/vendor.js:14527:17)
    at checkAndUpdateView (http://192.168.0.4:8100/build/vendor.js:14219:5)
    at callViewAction (http://192.168.0.4:8100/build/vendor.js:14569:21)

帐户设置。ts

export class AccountSettingsPage {

  currentUser: User;

  constructor(private navCtrl: NavController, private navParams: NavParams, private userProvider: UserProvider) {
    this.getCurrentUserDetails("ab@cd.com");
  }

  getCurrentUserDetails(email: string) {
    this.userProvider.getUserByEmail(email)
      .then((currentUser: User) => {
        this.currentUser = currentUser;
        console.log("data: " + JSON.stringify(currentUser));
      })
      .catch(e => console.error(JSON.stringify(e)));
  }

}   

user.ts（UserProvider）

getUserByEmail（email:string）：承诺{
返回此.databaseProvider.getDatabase（）。然后（数据库=>{
return database.executeSql（SQL通过电子邮件[电子邮件]选择用户）
。然后（（数据）=>{
让用户：用户；
//循环遍历所有记录并填充用户对象。应仅为1
for（设i=0；i

account-settings.html（第页）

帐户设置
名称：{{currentUser.Name}
电子邮件：{{currentUser.Email}
密码：{{*****}
电话：{{currentUser.name}
街道1:{{currentUser.street1}
街道2:{{currentUser.street1}
城市：{{currentUser.City}
状态：{{currentUser.State}
Zip:{{currentUser.Zip}
注销

尝试使用仅在成功加载

currentUser

时显示用户数据。由于未使用异步呈现和加载的所有这些属性的默认值初始化

currentUser

，因此可以使用此结构指令避免尝试访问未定义对象的这些属性，直到成功加载/解析：

<ion-content *ngIf=“currentUser” padding>
  <ion-list>
    <ion-label>Name: {{currentUser.name}}</ion-label>
    <ion-label>Email: {{currentUser.email}}</ion-label>
    <ion-label>Password: {{"*****"}}</ion-label>
    <ion-label>Phone: {{currentUser.name}}</ion-label>
    <ion-label>Street 1: {{currentUser.street1}}</ion-label>
    <ion-label>Street 2: {{currentUser.street1}}</ion-label>
    <ion-label>City: {{currentUser.city}}</ion-label>
    <ion-label>State: {{currentUser.state}}</ion-label>
    <ion-label>Zip: {{currentUser.zip}}</ion-label>
  </ion-list>
  <button ion-button (click)="logout()">Logout</button>
</ion-content>

<>最后考虑在角生命周期钩子中执行这个调用而不是构造函数，这是初始化任务的理想位置，例如这个数据库调用：

export class AccountSettingsPage implements OnInit {
  currentUser: User;

  constructor(private navCtrl: NavController, private navParams: NavParams, private userProvider: UserProvider) {}

  ngOnInit(): void {
    this.getCurrentUserDetails("ab@cd.com");
  }

  getCurrentUserDetails(email: string) {
    this.userProvider.getUserByEmail(email)
      .then((currentUser: User) => {
        this.currentUser = currentUser;
        console.log("data: " + JSON.stringify(currentUser));
      })
      .catch(e => console.error(JSON.stringify(e)));
  }
}

希望这有帮助

尝试使用仅在成功加载

currentUser

时显示用户数据。由于未使用异步呈现和加载的所有这些属性的默认值初始化

currentUser

，因此可以使用此结构指令避免尝试访问未定义对象的这些属性，直到成功加载/解析：

<ion-content *ngIf=“currentUser” padding>
  <ion-list>
    <ion-label>Name: {{currentUser.name}}</ion-label>
    <ion-label>Email: {{currentUser.email}}</ion-label>
    <ion-label>Password: {{"*****"}}</ion-label>
    <ion-label>Phone: {{currentUser.name}}</ion-label>
    <ion-label>Street 1: {{currentUser.street1}}</ion-label>
    <ion-label>Street 2: {{currentUser.street1}}</ion-label>
    <ion-label>City: {{currentUser.city}}</ion-label>
    <ion-label>State: {{currentUser.state}}</ion-label>
    <ion-label>Zip: {{currentUser.zip}}</ion-label>
  </ion-list>
  <button ion-button (click)="logout()">Logout</button>
</ion-content>

<>最后考虑在角生命周期钩子中执行这个调用而不是构造函数，这是初始化任务的理想位置，例如这个数据库调用：

export class AccountSettingsPage implements OnInit {
  currentUser: User;

  constructor(private navCtrl: NavController, private navParams: NavParams, private userProvider: UserProvider) {}

  ngOnInit(): void {
    this.getCurrentUserDetails("ab@cd.com");
  }

  getCurrentUserDetails(email: string) {
    this.userProvider.getUserByEmail(email)
      .then((currentUser: User) => {
        this.currentUser = currentUser;
        console.log("data: " + JSON.stringify(currentUser));
      })
      .catch(e => console.error(JSON.stringify(e)));
  }
}

---

希望这有帮助

在创建视图时，控制器中的

当前用户

未定义，直到从数据库中获取为止

如果未定义

currentUser

，则应在HTML中添加*ngIf指令以防止显示

<ion-content *ngIf="currentUser" padding>
  <ion-list>
    <ion-label>Name: {{currentUser.name}}</ion-label>
    <!-- ... -->
  </ion-list>
  <button ion-button (click)="logout()">Logout</button>
</ion-content>

名称：{{currentUser.Name}
注销

然后更新UserProdiver以实际返回承诺中的值：

getUserByEmail(email: string): Promise<User> {
  return new Promise((resolve, reject) => {
    this.databaseProvider.getDatabase().then(database => {
      database.executeSql(SQL_SELECT_USER_BY_EMAIL, [email])
        .then((data) => {
          let user: User;
          //loop through all the records and populate the user object. Should be only 1
          for (let i = 0; i < data.rows.length; i++) {
            user = {
              id: data.rows.item(i).id,
              name: data.rows.item(i).name,
              email: data.rows.item(i).email,
              password: data.rows.item(i).password,
              confirmPassword: data.rows.item(i).password,
              phone: data.rows.item(i).phone,
              street1: data.rows.item(i).street1,
              street2: data.rows.item(i).street2,
              city: data.rows.item(i).city,
              state: data.rows.item(i).state,
              zip: data.rows.item(i).zip,
              active: data.rows.item(i).active
            };
          }
          //return the populated user object back
          return resolve(user);
        });
    });
  });
}

getUserByEmail（email:string）：承诺{
返回新承诺（（解决、拒绝）=>{
这个.databaseProvider.getDatabase（）.then（数据库=>{
executeSql（SQL通过电子邮件[电子邮件]选择用户）
。然后（（数据）=>{
让用户：用户；
//循环遍历所有记录并填充用户对象。应仅为1
for（设i=0；i

在创建视图时，控制器中当前用户的

未定义，直到从数据库中获取

如果未定义
currentUser
，则应在HTML中添加*ngIf指令以防止显示

<ion-content *ngIf="currentUser" padding>
  <ion-list>
    <ion-label>Name: {{currentUser.name}}</ion-label>
    <!-- ... -->
  </ion-list>
  <button ion-button (click)="logout()">Logout</button>
</ion-content>


名称：{{currentUser.Name}
注销

然后更新UserProdiver以实际返回承诺中的值：

getUserByEmail(email: string): Promise<User> {
  return new Promise((resolve, reject) => {
    this.databaseProvider.getDatabase().then(database => {
      database.executeSql(SQL_SELECT_USER_BY_EMAIL, [email])
        .then((data) => {
          let user: User;
          //loop through all the records and populate the user object. Should be only 1
          for (let i = 0; i < data.rows.length; i++) {
            user = {
              id: data.rows.item(i).id,
              name: data.rows.item(i).name,
              email: data.rows.item(i).email,
              password: data.rows.item(i).password,
              confirmPassword: data.rows.item(i).password,
              phone: data.rows.item(i).phone,
              street1: data.rows.item(i).street1,
              street2: data.rows.item(i).street2,
              city: data.rows.item(i).city,
              state: data.rows.item(i).state,
              zip: data.rows.item(i).zip,
              active: data.rows.item(i).active
            };
          }
          //return the populated user object back
          return resolve(user);
        });
    });
  });
}

getUserByEmail（email:string）：承诺{
返回新承诺（（解决、拒绝）=>{
这个.databaseProvider.getDatabase（）.then（数据库=>{
executeSql（SQL通过电子邮件[电子邮件]选择用户）
。然后（（数据）=>{
让用户：用户；
//循环遍历所有记录并填充用户对象。应仅为1
for（设i=0；i