Как загрузить несколько данных через сервис и дождаться его в Angular2

Question

Я использую Ionic 2 с Angular 2 в своем проекте. В корневом компоненте вы можете нажать кнопку «Добавить», чтобы добавить новый отчет через сложную форму и множество предварительно предоставленных данных (есть некоторые варианты, которые загружаются с данными, полученными из базы данных sqlite) Теперь в моем «CreateReportComponent» i имеет следующий конструктор для загрузки данных и назначить его в локальный переменный массиве:

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) Но мне нужно сделать много e, а не только для контактов, как в примере.

Итак, вопрос: как ждать множественных звонков в базу данных?

Answer 1

я думаю, что что-то пойдет не так здесь

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 empty array, потому что это асинхронный процесс. вам нужно выполнить цикл через data.rows, а затем форматировать возвращаемые данные следующим образом.

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() вернуть объект обещания.

Answer 2

Что вы ищете - это метод forkJoin, который возвращает Observable, на который вы должны переключиться, вместо использования Promises, для справки о том, почему вы должны это сделать, here.

Краткая информация о вилке присоединиться со своей страницы GitHub:

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

Таким образом, вы можете смело делать параллельные запросы к вашему API.

Для получения дополнительной информации о forkJoin go 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 */ 
    });