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