Question

我刚刚开始使用Ionic框架。到现在为止，我已经好好相处了。我的问题是数组在运行时被取消，我无法弄清楚原因。我很难过。我想，对于这个问题，最好先发布我的代码。

    export interface Days
{
  name:string;
}

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage
{
  days = [] as Days[];
  constructor(public navCtrl: NavController, public alertCtrl: AlertController, public navParams: NavParams)
  {

  }

  presentDayDialog(): void
  {
    let alert = this.alertCtrl.create({
      title: 'Add new day',
      message: 'Enter a name for the new day',
      inputs: [
        {
          name: 'day',
          placeholder: 'Day'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => {
            this.addDays(data.day);
          }
        }
      ]
    });
    alert.present();
  }

  addDays(rname): void
  {
    this.days.push({name: rname});
  }

  itemTapped(Days)
  {
    this.navCtrl.push(RoutinePage, {
      pageName: Days.name
    });
    console.log("The page name was "+Days.name);
  }
}

export interface Routine
{
  name:string;
  weight: number;
  reps: number;
}

@Component({
  selector: 'page-routine',
  templateUrl: 'routine.html'
})

export class RoutinePage
{
  routines = [] as Routine[];
  public pageName;

  constructor(public navCtrl: NavController, public toastCtrl: ToastController, public alertCtrl: AlertController, public platform: Platform, public storage: Storage, public navParams: NavParams)
  {
    console.log('PRE CONSTRUCTOR ' + this.routines);

    this.pageName = navParams.get("pageName");
    this.getRoutines();
    console.log('POST CONSTRUCTOR ' + this.routines);
  }

  //Sets the routines to storage
  setRoutines()
  {
    console.log('ROUTINES ARRAY before setRoutine() '+ this.routines );
    this.storage.set(this.pageName, this.routines );
    console.log('ROUTINES ARRAY after setRoutine() '+ this.routines );
  }

  //Gets the routines from storage, this gets executed at the construction of this page so it isn't empty at the start
  getRoutines()
  {
    console.log('ROUTINES ARRAY before getRoutine() '+ this.routines );
    this.routines = [{name: 'Nigger', weight: 0, reps: 0}];
    this.storage.get(this.pageName).then((data) => {
      this.routines = data;
    });
    console.log('ROUTINES ARRAY after getRoutine() '+ this.routines );
  }

  //Adds a new routine and saves it to storage
  addRoutine(rname): void
  {
    console.log('ROUTINES ARRAY before addRoutine() '+ this.routines );
    this.routines.push({name: rname, weight: 0, reps: 0});
    console.log('ROUTINES ARRAY after addRoutine() ' + this.routines);
    this.setRoutines();
  }

  //Presents the dialog for adding a new routine on FAB-button-press, calls addRoutine function
  presentRoutineDialog(): void
  {
    let alert = this.alertCtrl.create({
      title: 'Add new routine',
      message: 'Enter a name for the new routine',
      inputs: [
        {
          name: 'routine',
          placeholder: 'Routine'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => {
            console.log('ROUTINES ARRAY AFTER SAVE BUTTON PRESS:' +this.routines);
            this.addRoutine(data.routine);
          }
        }
      ]
    });
    console.log('ARRAY BEFORE ALERT: ' + this.routines);
    alert.present();
    console.log('ARRAY AFTER ALERT: ' + this.routines);    
  }  
}

所以，这就是我认为这应该有效的方法。我将项目（天）添加到“第一”页面上的列表中。当我点击该项目时，我打开第二页并传递“Day”的名称，然后该名称将成为第二页的名称。我还使用此名称作为键名来将此数组存储在存储中。因此，每个页面都有自己的存储空间，页面在构建时会填充信息。

问题：例程 - 数组莫名其妙地在运行时被取消，除非我点击的第一页的日期名称为空。这可能与我的hacky-feeling存储系统有关，但我无法想象究竟是什么罪魁祸首。这些是控制台日志，我觉得有点有趣：

The page name was Upper Body home.ts:63:4
PRE CONSTRUCTOR routine.ts:28:4
ROUTINES ARRAY before getRoutine() routine.ts:46:4
ROUTINES ARRAY after getRoutine() [object Object] routine.ts:51:4
POST CONSTRUCTOR [object Object] routine.ts:32:4
ARRAY BEFORE ALERT: null routine.ts:91:4
ARRAY AFTER ALERT: null routine.ts:93:4
ROUTINES ARRAY AFTER SAVE BUTTON PRESS:null routine.ts:85:12
ROUTINES ARRAY before addRoutine() null

因此，在构造函数“完成”之后，数组突然变为null。这是为什么？我没看到什么？老实说，我的智慧结束了，我希望有人可以提供帮助。

Answer 1

好的，我在SO的帮助下修复了它。从storage.get('ArrayKey')返回的承诺是null，因为我的应用尝试获取的存储空间不存在。我做的是检查从storage.get('ArrayKey')返回的承诺是否为空。如果是，我让storage.set('ArrayKey')将数组存储为我初始化它的值，即array [] - ＆gt; 为空，但不是null 。然后，我打电话给storage.get('ArrayKey')。现在这已成功，因为现在数组为空，但不是null 。

有了这个标题，我怀疑有同样问题的人会发现这个，但也许他/她仍然会发现它。干杯，谢谢你的帮助。

数组莫名其妙地在运行时被取消

1 个答案: