Sunday, 25 August 2019

In Angular 7, how do I extract the result from an Observable?

I'm using Angular 7 with a Rail 5 back-end. I have a service that I use to interact with the Rails 5 back-end ...

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class CurrencyService {
  constructor(private _http: HttpClient) { }

  index() {
    let ret = this._http.get<Object[]>('api/currencies').map(r => r);
    console.log(ret);
    return ret;
  }

  refresh() {
    return this._http.get<Object[]>('api/refresh').map(r => r);
  }
}

I have this in my src/app/app.component.ts file that interacts with the service ...

import { CurrencyService } from './../shared/currency.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  currencies = [];
  title = 'app';
  apiStatus: string;
  constructor(private _currencySrv: CurrencyService) { }

  ngOnInit() {
    this._currencySrv.index<Object[]>().subscribe(
      currencies => this.currencies = currencies);
  }

  refresh() {
    this._currencySrv.refresh<Object[]>().subscribe(
      currencies => this.currencies = currencies);
  }

}

How do I extract the result of the call to "index" and "refresh" from the Observable object returned? When I try and iterate over the "currencies" member var using ngFor, I get the error

ERROR TypeError: Cannot read property 'name' of undefined
    at Object.eval [as updateRenderer] (AppComponent.html:4)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
    at checkAndUpdateView (core.js:13849)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callWithDebugContext (core.js:15098)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14635)
    at ViewRef_.detectChanges (core.js:11619)
    at eval (core.js:5918)

I think because the result is wrapped in a field called "data" but I don't know the proper way of extracting the field wihtout all kinds of compilation errors when I try and start my Angular server through "ng serve".

Edit: In src/app/app.component.html I have

<!--The content below is only a placeholder and can be replaced.-->
<ul>
  <ng-container *ngIf="currencies?.length">
  <li *ngFor="let currency of currencies">
    <div></div>
    <div></div>
    <div></div>
  </li>
  </ng-container>
</ul>

Refresh

yet no data displays ever, even though



from In Angular 7, how do I extract the result from an Observable?

No comments:

Post a Comment