2017-07-28 3 views
0

私はちょうどIonicフレームワークの作業を開始しました。今までは、大丈夫だった。私の問題は、実行時に配列がNULLになるということです。なぜそれが分からないのですか? 私は困惑しています。私は、この質問のために、まず自分のコードを投稿する方が良いと思います。実行時に配列が解読不能になる

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);  
    } 
} 

だから、これは私が、これは動作するはず想像する方法です。私は項目(日)を「最初の」ページのリストに追加します。そのアイテムをクリックすると、2番目のページが開き、「Day」の名前が渡され、2番目のページの名前になります。また、この名前をキー名に使用して、この配列をストレージに格納します。したがって、すべてのページには、ページが建設中の情報で満たされる独自のストレージがあります。

問題: 私がクリックした最初のページの日の名前が空である場合を除き、ルーチンは実行時に解読不能になります。これは、私のハッキー感覚のストレージシステムとは関連していますが、その原因を正確に想像することはできません。 これらは私がちょっと面白い見つけコンソールログ、以下のとおりです。

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です。何故ですか?私は何を見ていないのですか?私はここの知恵の終わりに正直にいて、誰かが助けてくれることを願っていました。

+1

ここで 'data'の値は何ですか:' this.routines = data; '? – robbannn

+0

@robbannnが問題の原因を正しく指摘していると思われます。私は 'console.log( 'POST CONSTRUCTOR' + this.routines);という行を追加するつもりだと思いますが、実行しません。具体的には、 'getRoutines'が完了した後の' this.routines'の値は表示されず、その関数は非同期であるため、その値は表示されません。 –

+0

[Observable/http/async呼び出しからの応答を返す方法angle2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) – Alex

答えて

0

さて、私はSOの助けでそれを修正しました。 storage.get('ArrayKey')から返される約束はnullでした。私のアプリが取得しようとしたストレージが存在しなかったからです。 storage.get('ArrayKey')から返された約束がnullだったかどうかを確認しました。 もし私がstorage.set('ArrayKey')の配列を、配列[] - >が空ではあるが、nullではなく、初期化した値として格納させる。 その後、私はstorage.get('ArrayKey')と呼んだ。これでアレイは今度は空であったが、nullではなかったので、これは成功した。

このタイトルでは、同じ問題を抱えている人は誰でもこれを見つけることはできませんが、まだ彼はそれを見つけることができます。乾杯、助けてくれてありがとう。

関連する問題