Данные не возвращаются правильно

Question

Я новичок в typeScript и Angular8

У меня есть следующий код для получения данных из веб-службы. В настоящее время он возвращает null, но если я добавлю console.log(this.service_type) к строке до конца блока if (user.status == 200) {, я получу правильные данные, как мне вернуть правильные данные

чем я не являюсь делаешь или делаешь неправильно?

import { User } from '../_models/user';
import { Router } from '@angular/router';
import { ApiService } from './api.service';
import { ServiceType, Donations, Betting, Topup } from '../_models/data';


@Injectable({
    providedIn: 'root'
})

export class CheckService {
  constructor(
      private apiService: ApiService,
      private router: Router
  ) {}

  service_type: ServiceType = null;
  donations: Donations = null;
  betting: Betting = null;
  services: Topup = null;

  getReward() {
    this.apiService.getRewardServices().subscribe(
      user => {
        if (user.status == 200) {
          this.service_type = user.data.service_type;
          this.donations = user.data.donations;
          this.betting = user.data.betting;
          this.services = user.data.services;
        }
      }
    );
    return {service_type: this.service_type, donations: this.donations, betting: this.betting, services: this.services}
  }
}```

Answer 1

Когда вызывается метод getRewards(), происходят следующие вещи:

1. Создается подписка на наблюдаемое.
   В подписке вы передаете лямбда-функцию, которая вызывается только когда поступают данные из этого потока.
2. Возвращение объекта
   Когда вы возвращаете объект, данные из потока еще не пришли, поэтому значения по-прежнему равны нулю.

Что вы можете сделать, вместо подписки на данные в методе, вернуть наблюдаемый объект и использовать его с async pipe.

Пример

Служба:

export class CheckService {
  constructor(
      private apiService: ApiService,
      private router: Router
  ) {}

  rewardObject$: Observable<any>;

  getReward() {
    this.rewardObject = this.apiService.getRewardServices().pipe(map(user => {
        if (user.status == 200) {
          return {
              service_type: user.data.service_type,
              donations: user.data.donations,
              betting: user.data.betting,
              services: user.data.services,
          };

          return null;
        }
    }));
  }
}

Шаблон:

<ng-container *ngIf="(rewardObject$ | async) as reward">
    <span>{{reward.service_type}}</span>
</ng-container>

Answer 2

Вы попадаете в блокпост, где большинство разработчиков застревают, когда впервые знакомятся с концепцией асинхронного программирования и реактивного программирования. У вас есть некоторый метод, getRewardServices, который возвращает некоторое Observable, на которое подписывается ваша служба, и выполняет обратный вызов для каждого элемента, который излучает эта наблюдаемая (вы можете прочитать больше здесь ). Ключевая проблема в этой строке:

return {service_type: this.service_type, donations: this.donations, betting: this.betting, services: this.services}

, которая может быть выполнена до того, как наблюдаемое испустит объект пользователя. Надлежащим способом решения этой проблемы будет сопоставление наблюдаемого с объектом, который вы хотите вернуть, и возвращение самого наблюдаемого. Внешняя служба / компонент будет отвечать за развертывание наблюдаемого и обработку асинхронного события. Как то так:

getReward(): Observable<any> {
  return this.apiService.getRewardServices().pipe(
    map(user => {
      if (user.status == 200) {
        this.service_type = user.data.service_type;
        this.donations = user.data.donations;
        this.betting = user.data.betting;
        this.services = user.data.services;
        return {service_type: this.service_type, donations: this.donations, betting: this.betting, services: this.services}
      }
      return some_other_error_value;
      });
}