For some reason, I cannot set a value in my local variable as expected. Here is the code snippet:
export class memberComponent implements OnInit {
member : Member = new Member();
constructor(private memberService: MemberService) {}
ngOnInit() {
this.loadMember();
console.log("member 1: ", this.member); // at this point, the member is empty
}
loadMember(){
this.memberService.getMember("john").subscribe(mem => {
this.member = mem;
console.log("member 2: ", this.member);// now, the member is NOT empty
});
}
}
However, since the member remains empty, nothing gets displayed on the page. Below is the content of my component.html file:
<h1>{{member.userName}}</h1>
Lastly, here is the implementation of the memberService:
export class MemberService {
baseUrl = environment.apiUrl;
constructor(private http: HttpClient) {}
getMember(userName: string) {
return this.http.get<Member>(this.baseUrl + 'users/' + userName);
}
}
I have tried using the pipe(take(1)) method and switching to an interface instead of a class, but unfortunately, it made no difference. The HTML page still remains blank. Can someone help me identify the issue and suggest a fix?