我想在注册用户后显示数据库中的数据,但显示的数据为空白

时间:2017-03-27 13:52:15

标签: ionic2

我正在尝试将用户注册为管理员或用户(角色),对于这两个角色,我使用两个不同的表,数据在单击注册按钮后成功注册到数据库中我已将根页面设置为主页组成的主页管理员我在导航控制器对象上使用了set root方法,但导航页面后数据没有显示。但在杀死应用程序并再次打开后,数据会在页面中显示任何答案??

register.ts file-
   this.database.openDatabase({
      name: "data.db",
      location: "default"
    }).then(() => {
      alert("database Opened");
      this.database.executeSql("INSERT INTO Managers(name,email,Password,Photo) VALUES(?,?,?,?)", [name, email, password, this.base64Image])
        .then((data) => {
          alert(JSON.stringify(data));
          alert("Registered Successfully into Managers");
          this.navCtrl.setRoot(Page1);
        }, (error) => {
          console.log("Unable To Insert Data into role1: ", error);
          alert("Unable To Insert Data");
        })
    }, (error) => {
      console.log("Unable To Open Database: ", error);
      alert("Unable to Open Database");
    });


 Page1.ts-
      this.database.openDatabase({
      name: "data.db",
      location: "default"
    }).then(() => {
      this.database.executeSql("SELECT * from Managers", {})
        .then((data) => {


this.Managers = [];
          if (data.rows.length > 0) {
            let managerLocal = [];
            for (var i = 0; i < data.rows.length; i++) {
              managerLocal.push({ password: data.rows.item(i).Password, id: data.rows.item(i).id, name: data.rows.item(i).name, email: data.rows.item(i).email, photo: data.rows.item(i).Photo });
            }
            this.Managers = managerLocal;
          }
        }, (error) => {
          console.log("Unable To Retrieve Data from Managers: ", error);
          alert("Unable To get Data");
        })
    }, (error) => {
      console.log("Unable To Open Database: ", error);
      alert("Unable to Open Database");
    });

    Page1.html-
      <ion-content padding>
  <ion-list>
    <h1 class="managers">Managers List</h1>
    <ion-item-sliding *ngFor="let manager of Managers">
      <ion-item>
        <ion-avatar item-left>
          <img [src]="manager.photo" *ngIf="manager.photo" />
        </ion-avatar>
        <h2>{{manager.name}}</h2>
        <p>{{manager.email}}</p>
        <button ion-button *ngIf="Role == '1' || Role == '0' 
            (click)="editDetails(manager)">
          <ion-icon name="create"></ion-icon>
      </button>
      </ion-item>
      <ion-item-options>
        <button ion-button *ngIf="Role == '0'" (click)="deleteData(manager)">
        <ion-icon name="trash"></ion-icon>Delete
      </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
  <ion-fab right bottom>
    <button ion-fab *ngIf="Role == '0'" (click)="register()">
        <ion-icon name="add"></ion-icon>
      </button>
  </ion-fab>

  <ion-label class="display" [style.visibility]="((Managers == null || Managers.length==0)) ? 'visible' : 'hidden'">No Data Available</ion-label>
</ion-content>

1 个答案:

答案 0 :(得分:0)

数据库已在register.ts文件中打开。当你创建setRoot时,你试图再次打开数据库,我认为这将是问题。将数据库启动逻辑放在资源文件或提供程序(使用angular2语言)中,并在hoepage和registerpage中导入资源,并使用db实例直接执行插入和选择查询。

//资源中的db initiatialisation示例:

export class Resource{
   db : any

   getDbInstance(){
        //Getting instance logic
       return new Promise((resove, reject){
            if(this.db){ //Checking if db is already initialised
           return resolve(this.db)
       }
       else{ //else initialise it and return the instance
            this.database.openDatabase({
                 name: "data.db",
                 location: "default"
            }, (dbInstance)=>{ this.db = dbInstance; return resolve(dbInstance) })
       }
      })
   }

}

这个方法将被称为两页的承诺。因此,实质上,db只打开一次,并且在整个应用程序中使用相同的实例。我无法根据您的需求为您提供完整的代码,因此,请研究如何为您的项目实施此代码。干杯