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

Question

我在我的项目中使用 Ionic 2 和 Angular 2。在根组件中，您可以单击 "Add" 按钮通过复杂的表单和大量预先提供的数据添加新的报告（有些选择是使用从 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 是空的...

数据库服务中的函数如下所示：

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

您正在寻找的是 returns Observable 的 forkJoin 方法，您应该切换到该方法而不是使用 Promises，以供参考为什么您应该进行此检查。

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

Runs all observable sequences in parallel and collect their last elements.

这样您就可以安全地向您的 API 发出并行请求。

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

此外，您应该如前所述使用 ngOnInit 调用服务。有关 Angular 2 个生命周期挂钩的更多信息，请参阅 docs.

Answer 2

您可以使用 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 */
     });

Answer 3

我觉得这里出了点问题

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

首先return Promise.resolve(employeeList);将return空数组，因为它是异步过程。您需要遍历 data.rows，然后像这样格式化 return 数据。

getAllEmployees(): Promise<Employee[]> {
  let query = "SELECT * FROM employees";
  return this.database.executeSql(query, []).then((data) => {
    let arr = [];
    for(let i = ; i < data.rows.length; ++i) {
      let emp = data.rows.item(i);
      let e = new Employee();
      e.id = emp.id;
      e.firstname = emp.firstname;
      e.lastname = emp.lastname;
      arr.push(e);
    }
    return arr;
  });
}

注意 .then() return 一个 promise 对象。

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

How to load multiple data via service and wait for it in Angular2

sqlite

resolver

typescript

ionic2

angular