Как использовать значение, полученное от одного сервиса в другом сервисе в рамках того же компонента Angular 6?

Question

Код следующего компонента взят из веб-приложения Angular 6, которое я создаю.Приложение отображает таблицу с функцией CRUD.У меня есть служба Angular, которая называется GetDBValuesService, которая подключена к базе данных и использует DBValues ​​() для получения массива массивов (каждый внутренний массив содержит значения данной строки в базе данных).Затем мой код собирает строки, у которых атрибут Number равен 10. Эти строки затем используются моим EventEmitter dataItems, что позволяет отображать их в таблице CRUD моей веб-страницы.

Я создал другую службу Angular.называется DataService, который получает целочисленное значение от другого компонента и отправляет это значение показанному компоненту (после подписки).Я подписался на эту службу в следующем коде и позволил экземпляру gotdata (публичной переменной, объявленной в этом компоненте) получить значение службы.Однако, когда я пытаюсь использовать этот экземпляр за пределами этой подписки (для замены жестко закодированных 10, описанных выше), this.gotdata не определено.

Как я могу изменить свой код, чтобы я мог использовать значение, заданноеслужба DataService в службе GetDBValuesService?В настоящее время приведенный ниже код работает из-за жесткого кода 10, но не работает, если я удалю эту строку.Спасибо, что нашли время, чтобы прочитать это.

Это часть моего компонента CRUD:

refresh = () => {
    this.DataService.DataID$.subscribe((data) => {
        this.gotdata = data;
        console.log(this.gotdata); //10 (value from console)
    });
    console.log(this.gotdata); //undefined (value from console)
    this.gotdata = 10; //hardcoded value allows further functionality, will be removed when this.gotdata retains its value from the above subscription
    if (this.gotdata != null) {
        this.GetDBValuesService.DBValues().subscribe((result) => {
            var a = 0;
            for (var i = 0; i < result.length; i++) {
                if (result[i].Number == this.gotdata) {
                    this.info[a] = result[i];
                    a = a + 1;
                }
            }
            this.dataItems.next(this.info); //sets rows to be displayed in the web page's table (used by component's HTML file)
        });
    }}

Answer 1

Проблема в том, что в момент, когда вы звоните по номеру console.log(...) и коду ниже, данные из наблюдаемой dataID$ все еще находятся на пути к вам.( Зачем вам нужно работать с наблюдаемыми? )

Лучшим подходом для этого будет использование оператора RXJS switchMap ( что такое switchMap? ),Потому что, как я вижу, вы хотите подписаться на первый observable, а после этого подписаться на другой observable.Так что это можно сделать так:

refresh = () => {
    this.DataService.DataID$.pipe(switchMap(data: any) => {
        if (data) {
            this.gotdata = data;
            return this.GetDBValuesService.DBValues();
        } else {
            return of(null); // if 'data' are null, return "empty" observable
        }
    })).subscribe((result: any) => {
        if (!result) {
            return; // return if 'result' is null (so the code bellow won't be executed)
        }
        var a = 0;
        for (var i = 0; i < result.length; i++) {
            if (result[i].Number == this.gotdata) {
                this.info[a] = result[i];
                a = a + 1;
            }
        }
        this.dataItems.next(this.info);
    });

Answer 2

this.gotdata не определено, поскольку данные еще не разрешены.

refresh = () => {
this.DataService.DataID$.subscribe((data) => {
    this.gotdata = data;
    console.log(this.gotdata); //10 (value from console)

    if (this.gotdata != null) {
        this.GetDBValuesService.DBValues().subscribe((result) => {
            var a = 0;
            for (var i = 0; i < result.length; i++) {
                if (result[i].Number == this.gotdata) {
                    this.info[a] = result[i];
                    a = a + 1;
                }
            }
            this.dataItems.next(this.info); //sets rows to be displayed in the web page's table (used by component's HTML file)
        });
   }}
});

Или вы можете поместить его в подписку при полном обратном вызове:

this.service.subscribe((data) => {
    // code here
},
(error) => console.error(error),
() => {
    // do stuff.
});