Angular 6 observables - извлекать данные из функции.subscribe() и использовать их в другом месте

Я бьюсь головой о стену с наблюдаемыми. Почти вся документация, которую я могу найти, находится в старшей версии rxjs синтаксис.

У меня есть вызов API, который является наблюдаемым. Я звоню в другое место и подписываюсь на него - пытаясь заполнить таблицу данными из этого GET запрос.

Если бы я просто console.log мой getData функция, она регистрирует подписку, а не мои данные. Я могу успешно console.log data в пределах .subscribe функция, но я хочу использовать data вне .subscribe(),

Как мне извлечь data вне .subscribe() функционировать и использовать его в другом месте? Или вся моя логика должна содержаться внутри .subscribe() функция для использования data?

getData2() {
    return this.m_dbService.get('api/myApiPath').subscribe(
        data => (console.log(data)), //This properly logs my data. How to extract `data` out of here and actually use it?
        error => { throw error },
        () => console.log("finished")
    );
}

workbookInit(args){
     var datasource = this.getData2();   // this returns the subscription and doesn't work.
}
Источник

4 ответа

Решение

Просто верните HTTP-запрос от getData() и подписаться внутри workbookInit функция.

getData2() {
    return this.m_dbService.get('api/myApiPath')
}

workbookInit(args){
    this.getData2().subscribe(
        data => {
           var datasource = data 
        }, 
        error => { throw error },
        () => console.log("finished") 
}
Источник

Что вы, вероятно, хотите сделать, это заполнить другой Observable с данными, так что вы можете получить доступ к ним в любом месте вашего проекта без необходимости вызова API более одного раза.

Для этого вы создаете то, что известно как Subject (в этом случае BehaviorSubject), и вы можете заполнить их данными, когда ваш вызов API возвращает ответ.

Затем, чтобы получить доступ к этим данным в другом месте, вы можете создать функцию "get" для возврата Subject (который сам по себе Observable) всякий раз, когда вам нужны данные.

Вот пример:

my-data.service.ts

myData: BehaviorSubject<number> = new BehaviorSubject<number>(0);

callApi() {
    this.dbService.get('apiUrl').subscribe(
        (data) = > { this.myData.next(data) // Assuming data is a 'number' }
    );
}

getMyData() {
    return this.myData.asObservable();
}

Теперь, чтобы использовать это в компоненте:

this.myService.getMyData().subscribe(
    (data) => { /* Use the value from myData observable freely */ }
);

Или вы можете полагаться на асинхронный канал Angular (это очень удобный метод для работы с наблюдаемыми в вашем коде).

Источник

Вы не должны подписываться на Observable внутри getData2, Вместо этого верните его как есть, затем сделайте следующее:

var dataSource;
this.getData2().subscribe(res => dataSource = res);

Обратите внимание, что переменная dataSource будет установлен, когда запрос будет выполнен (асинхронно), поэтому вы не можете использовать его сразу в той же области блока.

Если вы хотите использовать его немедленно, поместите свой код в подписку.

Источник

Если у вас есть наблюдаемая, которая предоставляет данные для заполнения таблицы, лучший способ не использовать subscribe(), но используйте наблюдаемое непосредственно в вашем HTML-шаблоне, используя async труба. Вам будет меньше о чем беспокоиться, и ваш код будет намного проще.

Источник
Другие вопросы по тегам