Question

我在项目中使用Ionic 2和Angular 2。在根组件中，您可以单击“添加”按钮，通过复杂的表单和大量预先提供的数据添加新的报告（有一些选项可以从sqlite数据库中获取数据）现在在我的“CreateReportComponent”中，我有以下构造函数来加载数据并将其分配给本地数组变量：

selectEmployeeOptions: Employee[];

constructor(private dbService: DatabaseService) {
  dbService.getAllEmployees().then(employees => {
      this.selectEmployeeOptions = employees;
  });

  // load more data like tasks etc.
});

但是当我想在我的组件中修改这些数据时，该数组是空的。我尝试在ngOnInit（）中做到这一点，但这似乎也是早期的。

在组件显示之前，我想要这样的事情：

  dbService.getAllEmployees().then(employees => {
      this.selectEmployeeOptions = employees;

      // modify data
      this.selectEmployeeTitleOptions = employees.map((item) => {
         return item.title;
      });
      console.log(JSON.stringify(this.selectEmployeeTitleOptions)) // --> empty
  });

但是selectEmployeeTitleOptions是空的......

databaseService 中的函数如下所示：

getAllEmployees(): Promise<Emplyoee[]> {
  let query = "SELECT * FROM employees";
  let employeeList = [];
  this.database.executeSql(query, []).then((data) => {
     if(data.rows.length > 0) {
       let e = new Employee();
       e.id = data.rows.item(i).id;
       e.firstname = data.rows.item(i).firstname;
       e.lastname = data.rows.item(i).lastname;
       employeeList.push(e);
     }
  }, (error) => {
     // handle error
  });
  return Promise.resolve(employeeList);
}

我读到有Resolve模式（https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html）但是我需要进行多次调用，而不仅仅是示例中的联系人。

所以问题：如何等待多次调用数据库？

Answer 1

我认为这里出了问题

if __name__ == '__main__':
    main()

第一个test = [('aaa', 10), ('bbb', 10), ('ccc', 12), ('ddd', 12), ('eee', 14)] number = 10 for i in test: if number in i: print("Number {} found.".format(number)) else: print("Number {} not found".format(number))将返回空数组，因为它是异步进程。你需要循环遍历data.rows，然后像这样格式化返回数据。

getAllEmployees(): Promise<Emplyoee[]> {
  let query = "SELECT * FROM employees";
  let employeeList = [];
  this.database.executeSql(query, []).then((data) => {
     if(data.rows.length > 0) {
       let e = new Employee();
       e.id = data.rows.item(i).id;
       e.firstname = data.rows.item(i).firstname;
       e.lastname = data.rows.item(i).lastname;
       employeeList.push(e);
     }
  }, (error) => {
     // handle error
  });
  return Promise.resolve(employeeList);
}

请注意.then()会返回一个promise对象。

Answer 2

您正在寻找的是forkJoin方法，该方法返回您应切换到的Observable而不是使用Promises，以获取有关您应该检查here的原因的参考。

关于来自GitHub页面的fork join的简短信息：

并行运行所有可观察序列并收集它们的最后一个元素。

通过这种方式，您可以安全地向API发出并行请求。

有关forkJoin的更多信息，请转到here。

此外，您应该使用前面提到的ngOnInit来调用服务。有关Angular 2生命周期钩子的更多信息，请参阅docs。

Answer 3

您可以使用Promise.all https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

将所有承诺推送到数组，然后转到

    let foo : [Promise<Emplyoee[]>,Promise<void>] = [getAllEmployees(), method2()];
    Promise.all(foo).then((results:any[]) => {
       let employeearray: any = results[0];
       /* and on an on */
     });

如何通过服务加载多个数据并在Angular2中等待它

3 个答案: