Although my observable is sending back the correct object, I am facing an issue where the data is not being stored against a local variable.
import { Component, OnInit, OnDestroy } from '@angular/core';
import { LookupListsService } from '../../services/lookup-lists.service';
import { SexList } from '../../models/lookups/sexType';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit, OnDestroy {
sexLists: SexList[] = [];
constructor(private lookupService: LookupListsService) { }
ngOnInit(): void {
this.getGenderList();
this.getCountryList();
this.getSexList();
const body = document.getElementsByTagName('body')[0];
body.classList.add('register-page');
body.classList.add('off-canvas-sidebar');
}
ngOnDestroy(): void {
const body = document.getElementsByTagName('body')[0];
body.classList.remove('register-page');
body.classList.remove('off-canvas-sidebar');
}
getSexList(): void {
this.lookupService.getSexList()
.subscribe(sexlist => {
console.log(sexlist)
this.sexLists = sexlist
});
}
}
Even though I can view the object in developer tools:
{
"sexList": [
{
"sexId": 1,
"sexCode": 1,
"sexText": "Male"
},
{
"sexId": 2,
"sexCode": 2,
"sexText": "Female"
}
]
}
However, when rendering it on my layout, I encounter the following issue:
<div><p>There are: {{sexLists.length}} records in the list</p></div>
In the console, I receive undefined for sexLists and the displayed text on the page shows:
There are: records in the list
I'm struggling to understand why the object fails to get set.
Additional service code update:
getSexList(): Observable<SexList[]> {
var apiURL = this.api.getApiEndPointByName('GetSex');
console.log(apiURL);
var sex = this.http.get<SexList[]>(apiURL);
return sex;
}