I am currently struggling with getting data to bind correctly from my web service call to my angular model. In a simple example that I have created to demonstrate the issue, the <li></li> elements are being rendered on the page but they are all empty with blank spans inside them. There are 3 elements because my database has 3 entries seeded in it. I have tried debugging this problem in various ways but haven't been able to identify the cause. Below, you can see my basic angular component, the HTML template, my TypeScript model, and an excerpt of one of the JSON objects returned from the web service:
Angular Component:
import {Component, OnInit} from "@angular/core";
import {Router} from "@angular/router";
import {BabyProfile} from "./baby-profile";
import {BabyProfileService} from "./baby-profile.service";
@Component({
selector: "baby-profile-list",
templateUrl: './app/baby-profile/baby-profile-list.component.html'
})
export class BabyProfileListComponent implements OnInit{
title: string;
selectedProfile: BabyProfile;
babyProfiles: BabyProfile[];
debug: string;
constructor(private babyProfileService: BabyProfileService,
private router: Router) { }
ngOnInit() {
this.babyProfileService.getAll().subscribe(
babyProfiles => this.babyProfiles = babyProfiles);
}
edit(babyProfile: BabyProfile) {
this.router.navigate(['babyprofile/', babyProfile.Id]);
}
}
HTML template for the component:
<h2>{{title}}</h2>
<div>
<ul class="list-group">
<li class="list-group-item" *ngFor="let babyProfile of babyProfiles"
(click)="edit(babyProfile)">
<span>{{babyProfile.FirstName}} {{babyProfile.LastName}}</span>
<span>{{babyProfile.BirthDate}}</span>
</li>
</ul>
</div>
TypeScript model:
export class BabyProfile {
constructor(
public Id: number = 0,
public FirstName: string,
public LastName: string,
public MiddleName: string,
public BirthDate: Date,
public DateCreated: Date,
public InactiveDate: Date
) { }
}
An example of the properties for one of the three objects returned by the web service (note: this screenshot was taken after replacing
babyProfiles => this.babyProfiles = babyProfilesbabyProfiles => console.log(babyProfiles)And here is an example of the empty output
<li><span> </span><span></span></li>I noticed there was a difference in casing between my TypeScript model and the response from the web service, so I updated the TypeScript model and HTML template to use lower camel case property names, but unfortunately this did not fix the issue. Can anyone spot what I might be overlooking here?
Your help will be greatly appreciated.