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

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

0 голосов
/ 29 августа 2018

Я бьюсь головой о стену с наблюдаемыми. Почти вся документация, которую я могу найти, представлена ​​в старом синтаксисе 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 ]

0 голосов
/ 31 августа 2018

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

0 голосов
/ 29 августа 2018

просто верните 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") 
}
0 голосов
/ 29 августа 2018

Что вы, вероятно, хотите сделать, - это заполнить еще один 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 async pipe (это очень удобный метод для работы с наблюдаемыми в вашем коде).

0 голосов
/ 29 августа 2018

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

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

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

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

...