Hi,
Another possibility could be to use the async pipe
<https://angular.io/api/common/AsyncPipe>.
The general idea would be to do something like this in your component :
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export class AgentcategorylistingComponent implements OnInit {
public agentcategories$: Observable<AgentCategory[]>;
(...)
ngOnInit() {
this.agentcategories$ = this.apiService.getAgentCategories()
.pipe(
map(data => data.result)
);
}
}
and in your template something like this :
<div *ngFor="let agentcategory of agentcategories$ | async">
{{ do something whit agentcategory }}
</div>
One advantage of the async is that it unsubscribe automatically when it
dispose.
I am not sure but I think that you have to store the Subscription instance
in order to be able to unsubscribe in the onDestroy method if you subscribe
in the ngOnInit.
Not tested there may be typos, this is only the general idea.
Regards,
Arnaud.
Le lundi 3 décembre 2018 21:03:25 UTC+1, Lucas Lacroix a écrit :
>
> Your code inside ngOnInit is asynchronous. This means
> "this.agentcategories" may not have a value at the time the screen is
> rendered.
> Give the property a default value (ie. if it is an array, assign it an
> empty array within the constructor) or conditionalize the display of the
> component that uses that property (ie. *ngIf="!!agentcategory")
>
> On Mon, Dec 3, 2018 at 3:00 PM Jenny <sunil...@gmail.com <javascript:>>
> wrote:
>
>> Hi,
>>
>> I am getting the response "Undefined" when I try to list all Agent
>> Categories in my Angular 7 App. Could you please let me know the reason?
>>
>> To Reproduce the issue:
>>
>> http://valminddemo.tk then click Agent Categories
>>
>> Web API is working properly.
>>
>> import { Component, OnInit } from '@angular/core';
>> import {Router} from "@angular/router";
>> import {AgentCategory} from "../model/agentcategory.model";
>> import {ApiService} from "../core/api.service";
>>
>> @Component({
>> selector: 'app-agentcategorylisting',
>> templateUrl: './agentcategorylisting.component.html',
>> styleUrls: ['./agentcategorylisting.component.scss']
>> })
>> export class AgentcategorylistingComponent implements OnInit {
>>
>> agentcategories: AgentCategory[];
>>
>> constructor(private router: Router, private apiService: ApiService) { }
>>
>> ngOnInit() {
>> this.apiService.getAgentCategories()
>> .subscribe( data => {
>> this.agentcategories = data.result;
>> });
>> } }
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Angular and AngularJS discussion" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to angular+u...@googlegroups.com <javascript:>.
>> To post to this group, send email to ang...@googlegroups.com
>> <javascript:>.
>> Visit this group at https://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
> --
> Lucas Lacroix
> Computer Scientist
> System Technology Division, MEDITECH <http://ehr.meditech.com>
> 781-774-2293
>
> <https://ehr.meditech.com/expanse>
> <https://www.linkedin.com/company/meditech>
> <https://twitter.com/MEDITECH> <https://www.facebook.com/MeditechEHR>
> Subscribe
> <https://info.meditech.com/get-great-meditech-content?hsCtaTracking=864299ec-5abf-4004-9c6d-2d051794101f%7Cc911be42-538a-4a48-8dca-a6d4001c6326>
> to
> receive emails from MEDITECH or to change email preferences.
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
