CODEWITHSUNDEEP
javascriptangulartypescript
Panda
Panda

Reputation: 415

How to display the observable data using the service in angular

home.component.ts

<h1>{{ (reportsToday$ | async)}}</h1>
<div echarts [options]="alertsDaily$ | async">
<div echarts [options]="alertsToday$ | async">
<div [onDisplay]="alertsDaily$ | async">

report.component.ts

constructor(private report: ReportService) {}

getReports() {
  this.report.getStatusReport();
}

report.service.ts

  displayAlert$ = new BehaviorSubject(undefined);
  reportsToday$ = new BehaviorSubject(undefined);
  alertsToday$ = new BehaviorSubject(undefined);
  alertsDaily$ = new BehaviorSubject(undefined);

constructor() {}

getStatusReport() {

  loading = {
    today: false,
    daily: false
  };

    this.loading.today = true;
    this.loading.daily = true;

    const severities = ['LOW', 'MEDIUM', 'HIGH', 'URGENT'];
    const reportModules = [
      { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } },
      {
        url: 'application1',
        params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() }
      },
      {
        url: 'application2',
        params: {
          to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
          from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
        }
      },
      {
        url: 'application3',
        params: {
          to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
          from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
        }
      }
    ];

    const promises = applicationModule.map(
      target =>
        new Promise(resolve => {
          this.notificationService
            .getSummary(target.url, target.params)
            .pipe(take(1))
            .subscribe(
              (result: Response) => 
                resolve({ target, result });
              },
              (err: Error) => {
                // return reject(err);
              }
            );
        })
    );

    Promise.all(promises).then(results => {
      const options = this.preConfig;
      const week = this.getWeek();

      results.forEach((res: any) => {
             ....

        if (res.target.url !== '') {
          if (res.target.url === 'application1') {
            ....
            this.loading.today = false;
            this.alertsToday$.next(options.today);
          }else {

            if (res.target.url === 'application2') {
              ...
              ...
              this.loading.daily = false;
              this.alertsDaily$.next(options.daily);
            } else {
              ....
              ....
              this.loading.daily = false;
              this.alertsDaily$.next(options.daily);
            }

          }
       }else {
          this.reportsToday$.next(res.result[0]);
}
    }
   });

}

The problem here is it doesn't display the observable data. When I run the application there's no error, but it doesn't display the data of displayAlert$, reportsToday$, alertsToday$ and alertsDaily$.

I used service it because, I will use it from the other components.

How to get the observable from service and display it on home component?

Upvotes: 0

Views: 130

Answers (2)

Pratik soni
Pratik soni

Reputation: 108

I think new BehaviorSubject(undefined); is causing the problem. Can you initialize like new BehaviorSubject([]); or if it is string then new BehaviorSubject(''); and if number then new BehaviorSubject(0);

I am assuming that you have correctly called service from components.

Upvotes: 1

Kishor Kunal
Kishor Kunal

Reputation: 267

In component you can't see the variable directly from service. It should be from component itself.

Also you need to subscribe the values you are firing with .next(). Unless you subscribe them , the value won't be set.

Upvotes: 1

Related Questions