Angular 在角度2中完成后访问可观察流？

我一直在编写一个使用IndexedDB的简单应用程序（感谢Robisim提供了他的示例应用程序，我借用了他的代码），但是异步访问组件的对象数组时遇到了困难。即使我能够使用| async管道迭代html页面中的项目，但我似乎无法处理ts文件中的对象数组。我已经尝试订阅了observable，但它没有成功。当observable从IndexedDB加载完毕后，有人能帮我选择对象数组中的第一个对象吗

主分量

getSchedule（）{

}

get ITEMS（）：可观察{

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


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

---

}

因为对IndexedDB的访问是异步的，所以只有在调用

getSchedule

方法时才会出现问题：事实上，如果您从构造函数调用该方法，那么

openDB

方法肯定还没有完成。尝试从按钮调用该方法，您将看到它是有效的：

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

Get schedule

一旦您了解了这一点，如果您需要db的数据在应用程序加载时在组件中可用，例如，您可以使用APP_初始值设定项，它在上载应用程序之前等待条件满足：

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 { }

@Injectable（）导出类IndexedDB{
构造函数（public indexedDB:IndexedDBService，public entity:entity）{}
load（）：承诺{
//打开“Angular2IndexedDB”数据库。如果该数据库不存在，将创建该数据库。
让承诺：承诺=新承诺（（解决：任何）=>{
this.indexedDB.openDBAsync（“Angular2IndexedDB”，1）.forEach(
（readyState:string）=>{
log（'IndexedDB服务：打开数据库：'+readyState）；
}，空
).那么(
() => {
//获取所有记录。
this.indexedDB.getAllRecordsAsync（“ItemStore”）.forEach(
//下一个。
（记录：项目）=>{
//将下一条记录添加到实体。
if（记录！=null）{
本.实体.附件（记录）；
}
}，空
).然后（（）=>{
决心（正确）；
log（'IndexedDB服务：获取所有已完成的记录'）；
});
});
});
回报承诺；
}
}
导出函数initIndexedDB（indexedDB:indexedDB）：函数{
return（）=>indexedDB.load（）；
}
@NGD模块({
...
供应商：[
IndexedBService，
实体，
IndexedDB，
{
提供：应用程序初始化器，
useFactory:initIndexedDB，
副部长：[索引数据库]，
多：真的
}
],
引导：[AppComponent]
})
导出类AppModule{}

并从AppComponent中删除

openDB

方法

---

如果您需要加载特定组件的数据，您可以使用Angular router Resolve。

嘿，Rob，非常感谢您回答我的问题。在过去的几天里，我一直在努力实现这个答案。发生的事情之一是，整个应用程序加载到一个空白的白色屏幕上，我在控制台或终端上没有收到任何错误。我看了其他APP_初始化器的案例，仍然有点迷路。我刚刚让它工作起来！查看您回购协议中的应用程序并为IndexedDB提供，它工作得非常完美，能够在加载应用程序时拾取第一个项目。再次感谢你！

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

@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 { }