訪問可觀察到的流已在角2結束後？

Question

我已經寫了一個簡單的應用程序，它利用索引資料的（感謝Robisim他的示例應用程序，其代碼我借https://github.com/robisim74/angular2indexedDB），但我有麻煩訪問對象的數組我的組件是異步的。儘管我可以使用|來在HTML頁面上遍歷ITEMS異步管道 - 我似乎無法使用ts文件中的對象數組。我已經嘗試訂閱observable，但它沒有成功做任何事情。任何人都可以請幫我選擇對象數組中的第一個對象，當observable從IndexedDB加載完成時？

首頁組件

getSchedule（）{

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

}

得到物品（）：可觀察{

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


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

}

代碼在應用COMPONE NT打開DB

openDB（數據庫：字符串）{

// 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

因爲訪問索引資料是異步的，問題是隻有當調用getSchedule方法：其實，如果從構造函數中調用例如法，openDB方法，肯定尚未完成。嘗試從一個按鈕來調用方法，你會看到，它的工作原理：

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

一旦你理解了這一點，如果你需要在DB的數據是在應用負載的組件可用，您可能，例如，使用APP_INITIALIZER，該等待條件被滿足的上傳應用程序之前：

的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方法。

如果您需要加載數據的特定組件，相反，你可以使用角路由器解決。