My application, built with dotnet core 2.0 and angular 2, allows me to view member details. The process begins with a list page displaying all the members from a SQL Server database. Each member on the list has a link that leads to an individual details page. A member.service.ts manages this service. However, when I refresh the details-member.component.html page, the server spins endlessly without returning any data. The only error message I encounter is "firstName" is not defined. Strangely, everything works perfectly fine without the need for refreshing.
member.service.ts
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
@Injectable()
export class MemberService {
constructor(private http: Http) { }
getAllMembers(){
return this.http.get('/api/members').map(res => res.json());
}
getMember(id:any){
return this.http.get("/api/members/" + id).map(res => res.json());
}
}
details-member.component.ts
import { Component, OnInit } from '@angular/core';
import { MemberService } from '../../../services/member.service';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-details-member',
templateUrl: 'details-member.component.html'
})
export class DetailsMemberComponent implements OnInit {
member: any;
memberId:number;
constructor(
private route: ActivatedRoute,
private router: Router,
private memberService: MemberService,
) {
route.params.subscribe(p => {
this.memberId = +p['id'];
if (isNaN(this.memberId) || this.memberId <= 0) {
router.navigate(['/member/list-members']);
return;
}
});
}
ngOnInit() {
this.memberService.getMember(this.memberId)
.subscribe(
v => this.member = v,
err => {
if (err.status == 404) {
this.router.navigate(['/members/list-members']);
return;
}
});
}
}
details-member.component.html
<div class="page-header clearfix detailHeading">
<h1 class="text-muted">Demographic Details</h1>
</div>
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<p>Full Name : <b>{{ member.firstName }} {{ member.middleName }}
{{ member.lastName }}</b></p>
<p>Gender : <b>{{ member.gender }}</b></p>
<p>Date of Brith : <b>{{ member.dateOfBirth | date }}</b></p>
<p>Age : <b>{{ member.dateOfBirth | age }}</b></p>
<p>Race : <b>{{ member.race }}</b></p>
<p>Education : <b>{{ member.education }}</b></p>
<p>Address : <b>{{ member.address }}</b></p>
<p>Emergency Contact Name : <b></b></p>
<p>Emergency Contact Address : <b></b></p>
<p>Emergency Contact Phone : <b></b></p>
</div>
<div class="col-md-6">
<hr>
<div class="alert alert-warning" role="alert">
Created : <b>{{ member.createdDate | date:'medium' }} by {{ member.createdBy }}</b>
</div>
<div class="alert alert-warning" role="alert">
Last Update : <b>{{ member.updatedDate | date:'medium' }} by {{ member.updatedBy }}</b>
</div>
</div>
</div>
The error message says:
fail: Microsoft.AspNetCore,NodeServices[0] ERROR TypeError: Cannot read propery 'firstName' of undefined