Angular 2 - Component property undefined in method - javascript

I have a property that is a custom class array. The array is populated with a call to a service which calls a web service for data. I have subscribed to the observable and I'm using the complete event to fire off a method which loads a graph.
The data the graph uses should come from the array which is populated during the subscribe, but when I attempt to do so in the method I am getting an undefined error on my component property. Why is this the case, I though that the component property should be accessible to methods in the same class.
export class MetricsComponent implements OnInit{
errorMessage: string;
metric: MetricData[] = [];
//constructor is used for dependency injection
constructor(public _metricsService: MetricsService){}
ngOnInit(): void {
console.log('talking to service...');
this._metricsService.getData()
.subscribe(
data => this.metric = data,
error => this.errorMessage = <any>error,
this.LoadChart
);
}
LoadChart(): void {
console.log(this.metric); // <== this returns as undefined
}

Use arrow functions to retain the scope of this.
ngOnInit(): void {
console.log('talking to service...');
this._metricsService.getData()
.subscribe(
data => this.metric = data,
error => this.errorMessage = <any>error,
() => this.LoadChart()
);
}

do it like this for more info read about lexical this and arrow functions one more thing if you are using chrome developer tools it will still show null there is some bug with chrome developer tools.
LoadChart = () => void {
console.log(this.metric); //
}

Related

Angular TypeScript: waiting for a void method to run before another method

I have a method in an Angular component that pulls data via HttpClient subscription, and assigns it to an attributes this.allData, then instantiates an empty dictionary of parameters based on this, to pass to a second function:
export class TestComponent implements OnInit {
allData: object[] = []
activeData: object = {}
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.getData()
this.makeRequestBasedOnData()
}
getData() {
this.http.get(this.url).subscribe(res => {
for (let datum of res["data"]) {
this.allData.push({
"key": Object.keys(datum)[0],
"values": Object.values(datum)[0]
})
this.activeData[Object.keys(datum)[0]] = ""
}
})
}
makeRequestBasedOnData() {
let testParams = this.activeData
console.log(testParam)
}
}
I need these steps to happen sequentially. At the moment, logging the testParams in makeRequestBasedOnData() simply shows an empty object {}. When I try to return arbitrarily in the first method, I get a TypeScript error that you cannot assign a promise to type void.
How do I enforce synchronicity here even though neither method actually returns anything?
You can return Observable from getData method and proceed with any other methods within subscribe:
ngOnInit(): void {
this.getData().subscribe(() => this.makeRequestBasedOnData());
}
getData() {
return this.http.get(this.url).pipe(
tap(res => {
// update allData
})
);
}
where:
pipe method allows us to provide any kind of transformation with the data returned from http.get(...) call.
tap is a rxjs operator for side-effects, meaning that we can do everything we want with the response without modifying Observable flow.

observable undefined in component - Angular

I have a service that connects with api
export class ConsolidadoApi {
constructor(private http: HttpClient) { }
getInvestiments(search?: any): Observable<any> {
return this.http.get<any>(`${environment.basePosicaoConsolidada}`);
}
}
Response this api:
https://demo5095413.mockable.io/consolidado
This one is responsible for the logic before reaching the component
#Injectable({
providedIn: 'root'
})
export class CoreService {
public test;
constructor(private api: ConsolidadoApi, private state: StateService) { }
public createMenu() {
this.api.getInvestiments()
.subscribe(response => {
console.log(response.carteiras[0])
this.products = response.carteiras[0]
return this.products;
})
}
In my component
export class MenuComponent implements OnInit {
constructor( private coreService : CoreService ) {}
ngOnInit(): void {
console.log(this.coreService.createMenu())
}
}
But when createMenu is called in menu.component.ts it comes undefined.
The raw response is an object. forEach works only on an array. If you are aiming for forEach in 'categorias', you should try
this.test.categorias.forEach()
When you return Observable<any>, that means the argument of the lambda you create when you do subscribe (which you named response) is type any. This doesn't necessary have the function forEach defined (unless the API returns an object with that prototype). That's generally why using any is not good practice; you can't have any expectations on what the object can contain. In fact, it's possible that it's not on object (it could be an array since any is not exclusively an object). If you do want to use forEach, you will want to make sure that response is type array. You can inspect the object's type before using it (e.g. using typeof) and make a judgement on what to call or even just check if the function you're trying to use is defined first, e.g. if (response.forEach !== undefined). You don't actually need to compare to undefined though, so if (response.forEach) suffices. In the examples, I used response, but you can use this.test since they are the same object after the first line in the lambda.
Based on the link you shared, the response is an object. You can log it to the console to confirm.
You can only call for each on an array, so for example, based on the response api, you can call forEach on the property ‘categorias’ and on that array’s children property ‘produtus’
Edit: this answer was based on the op original api and question
https://demo5095413.mockable.io/carteira-investimentos
public createMenu() {
return this.api.getInvestiments()
}
ngOnit() {
this.coreService.createMenu().subscribe(x => console.log(x.categorias))};
{
"codigo":1,
"categorias":[
{
"nome":"Referenciado",
"valorTotal":23000.0,
"codigo":"2",
"produtos":[
{
"nome":"CDB Fácil Bradesco",
"valor":2000.0,
"codigo":1,
"quantidade":0.0,
"porcentagem":0.5500,
"aplicacaoAdicional":500.0,
"codigoInvest":1,
"salaInvestimento":"CDB",
"permiteAplicar":true,
"permiteResgatar":true,
"movimentacaoAutomatica":false,
"ordemApresentacao":37,
"horarioAbertura":"08:30",
"horarioFechamento":"23:59",
"codigoGrupo":0,
"codigoMF":"001

Using async pipe with angular-modal-gallery

I am trying to use angular-modal-gallery plugin to display a number of images from urls returned from a service as json.
the modal gallery works fine if I hard code per the demos. However, it stops working when I try to hook in my service.
In my component.html I have;
<ks-modal-gallery [id]="1" [modalImages]="myModalImages | async"></ks-modal-gallery>
then in the component.ts;
myModalImages: Image[];
myModalImagesSubscription: Subscription;
constructor(private galleryService: GalleryService, private imageService: ImageService) {
this.myModalImagesSubscription = this.imageService.getModalImages().subscribe((result: Image[]) => {
this.myModalImages = result;
});
}
Where the getModalImages() is;
getModalImages(): Observable<Image[]> {
return this.http.get(environment.apiUrl + "/image/portfolio/modal/", this.buildRequestOptions())
.map(res => res.json())
.catch(this.handleError);
}
Now the api is being hit and the Json with the results returned. However, when I run the SPA I get the following error;
ERROR TypeError: Cannot read property 'length' of null
at ModalGalleryComponent.initImages
I have also tried the amending the following to return the Observable object;
myModalImages: Observable<Image[]>;
constructor(private galleryService: GalleryService, private imageService: ImageService) {
this.myModalImages = this.imageService.getModalImages();
}
Which suggests its trying to initialize prior to getting the images?
Can anyone please direct me and tell me what I a doing wrong here?
Finally I have tried removing the async pipe and initializing the array as follows;
myModalImages: Image[] = [];
myModalImagesSubscription: Subscription;
constructor(private galleryService: GalleryService, private imageService: ImageService) {
this.myModalImagesSubscription = this.imageService.getModalImages().subscribe((result: Image[]) => {
this.myModalImages = result;
});
}
with the following in the html;
<ks-modal-gallery [id]="1" [modalImages]="myModalImages"></ks-modal-gallery>
I then get the following error;
ERROR TypeError: Cannot read property 'get' of undefined
at CatchSubscriber.BaseService.handleError [as selector]
Don't subscribe to the service. async pipe will do that for you. Assign the returned observable to myModalImages property.
constructor(private galleryService: GalleryService, private imageService: ImageService) {
this.myModalImages= this.imageService.getModalImages() ;
}

Angular HttpClient get, wrong this object

in my Angular App i make a simple call to a node.js server. the HttpClient "get"
function returns the right answer. This answer I want to store in a variable of my component "interfaces". But in the "subscribe" function of the get request my "this" pointer doesn't point to my component. Instead it tells me that it is of type "SafeSubscriber". Any call to my member "interfaces" lead to the following error:
TypeError: Cannot read property 'interfaces' of undefined
export class SettingsComponent implements OnInit {
public interfaces : string[];
constructor(private http: HttpClient) {
this.interfaces = [];
this.interfaces.push("huhu");
}
ngOnInit() : void {
this.http.get('http://localhost:3000/settings/interfaces').subscribe((data) => {
// Read the result field from the JSON response.
console.log(data);
this.interfaces.push("xxx");
Object.keys(data).forEach(function(k) {
console.log(k);
this.interfaces.push("xxx");
});
}),
err => {
console.log("error " + err);
};
}
}
As you can see I also tried to enter some values manually into the array just to make sure, that not the server response is causing the problem.
Any help is appreciated.
I used this code as a blueprint which is from:
https://angular.io/guide/http
#Component(...)
export class MyComponent implements OnInit {
results: string[];
// Inject HttpClient into your component or service.
constructor(private http: HttpClient) {}
ngOnInit(): void {
// Make the HTTP request:
this.http.get('/api/items').subscribe(data => {
// Read the result field from the JSON response.
this.results = data['results'];
});
}
}
You're losing reference to the correct this in this statement:
Object.keys(data).forEach(function(k) {..})
Inside the function block code this refers to the calling context , which is the subscribe method itself, that's why interfaces is undefined, since it's not a property of the subscribe method.
You can change the function for a lambda en it should be fine:
Object.keys(data).forEach((k) => {..})

Data set in observable not updating in template

I'm trying to learn Angular 2 and am rebuilding an Angular 1 app I've made with Angular 2 using the Angular CLI. I've setup a HTTP GET request, which fires successfully, and setup a subscriber to interpret the result, and console logging in the subscriber function shows the data I expect. However, no data is being updated on the template.
I tried setting the data to an initial value, to a value in the ngOnInit, and in the subscriber function, and the initial and ngOnInit update the template accordingly. For the life of me, I can't figure out why the template won't update on the subscribe.
events: any[] = ['asdf'];
constructor(private http: Http) {
}
ngOnInit() {
this.events = ['house'];
this.getEvents().subscribe(this.processEvents);
}
getEvents(): Observable<Event[]> {
let params: URLSearchParams = new URLSearchParams();
params.set('types', this.filters.types.join(','));
params.set('dates', this.filters.dates.join(','));
return this.http
.get('//api.dexcon.local/getEvents.php', { search: params })
.map((response: Response) => {
return response.json().events;
});
}
processEvents(data: Event[]) {
this.events = ['car','bike'];
console.log(this.events);
}
The data is being displayed via an ngFor, but car and bike never show. Where have I gone wrong?
You have gone wrong with not respecting the this context of TypeScript, if you do stuff like this:
.subscribe(this.processEvents);
the context get lost onto the processEvents function.
You have to either bind it:
.subscribe(this.processEvents.bind(this));
Use an anonymous function:
.subscribe((data: Events) => {this.processEvents(data)});
Or set your method to a class property:
processEvents: Function = (data: Event[]) => {
this.events = ['car','bike'];
console.log(this.events);
}
Pick your favourite, but I like the last option, because when you use eventListeners you can easily detach them with this method.
Not really sure with what's going on with that processEvents. If you want to subscribe to your response just do:
this.getEvents()
.subscribe(data => {
this.events = data;
});

Categories