それは角度2に完了した後に観察可能なストリームにアクセスしますか？

Question

私はのIndexedDBを使用するシンプルなアプリ（コード私はhttps://github.com/robisim74/angular2indexedDBを借り、彼のサンプルアプリケーションのためのRobisimのおかげで）書いてきたが、トラブル非同期に私のコンポーネントのオブジェクトの配列へのアクセスを持っています。私は、HTMLページでITEMSを繰り返し処理することができますが、非同期パイプ - 私はtsファイルのオブジェクト配列で動作するように見えません。私は観測可能なものを購読しようとしましたが、何もすることに成功しません。誰も私が観察がのIndexedDBから読み込みが完了しているオブジェクト配列内の最初のオブジェクトを選択して助けてくださいことはできますか？

ホームコンポーネント

getSchedule（）{

this.selectedSchedule = this.entity.schedule[0]; 

}

項目（）を取得：アプリComponeで観察{

return new Observable((observer: Observer<Array<Item>>) => { 


    observer.next(this.entity.schedule); 
    console.log(this.entity.schedule); 
    observer.complete(); 
}); 

}

コードNT DB

を開く

openDB（DBNAME：文字列）{

// Opens the database. 
this.indexedDB.openDBAsync(dbName, 1).forEach(

    // Next. 
    (readyState: string) => { 

    console.log('IndexedDB service: opening db: ' + readyState); 

    }, null 

).then(

() => { 

    // Gets all records from "TodoStore". 
    this.indexedDB.getAllRecordsAsync("ItemStore").forEach(

     // Next. 
     (record: Item) => { 

     // Adds next record to the Todos entity. 
     if (record != null) { 

      this.entity.addItem(record); 

     } 

     }, null 

    ).then(() => console.log('IndexedDB service: obtaining of all records completed.')) 
    } 

); 

}

Answer 1

のIndexedDBへのアクセスは非同期であるため、問題があるだけあなたがgetScheduleメソッドを呼び出すとき：実際には、あなたは、コンストラクタから例えばメソッドを呼び出した場合、openDB方法は間違いなく、まだ完了していません。ボタンからメソッドを呼び出すために試してみて、あなたはそれが動作することを確認できます：

<button type="button" (click)="getSchedule()">Get schedule</button> 

あなたがこれを理解すればあなたは、DBのデータは、アプリケーションの負荷でのコンポーネントで利用できるようにする必要がある場合は、あなたがかもしれません、

AppModule

@Injectable() export class IndexedDB { 

    constructor(public indexedDB: IndexedDBService, public entity: Entity) { } 

    load(): Promise<void> { 
     // Opens the "Angular2IndexedDB" database. If it doesn't exist, it will be created. 
     let promise: Promise<any> = new Promise((resolve: any) => { 
      this.indexedDB.openDBAsync("Angular2IndexedDB", 1).forEach(
       (readyState: string) => { 
        console.log('IndexedDB service: opening db: ' + readyState); 
       }, null 
      ).then(
       () => { 
        // Gets all records. 
        this.indexedDB.getAllRecordsAsync("ItemStore").forEach(
         // Next. 
         (record: Item) => { 
          // Adds next record to the entity. 
          if (record != null) { 
           this.entity.addItem(record); 
          } 
         }, null 
        ).then(() => { 
         resolve(true); 
         console.log('IndexedDB service: obtaining of all records completed.'); 
        }); 
       }); 
     }); 

     return promise; 
    } 
} 

export function initIndexedDB(indexedDB: IndexedDB): Function { 
    return() => indexedDB.load(); 
} 

@NgModule({ 
    ... 
    providers: [ 
     IndexedDBService, 
     Entity, 
     IndexedDB, 
     { 
      provide: APP_INITIALIZER, 
      useFactory: initIndexedDB, 
      deps: [IndexedDB], 
      multi: true 
     } 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

とAppComponentからopenDB方法を削除する：例えば、アプリケーションをアップロードする前に条件を待つAPP_INITIALIZERは、満足するために使用します。

特定のコンポーネントのデータをロードする必要がある場合は、角度ルーターの解決を使用できます。