角型データがモデルに正しくバインドされていません

Question

現在、私のWebサービス呼び出しのデータに問題があり、角度モデルに正しくバインドされていません（または、少なくとも私が現在問題と思われるもの）。私の問題を説明するこの単純な例は、<li></li>要素がページに表示される結果となりますが、それらはすべて空白で、内部に空スパンを含んでいます。私のDBには3つのエントリがあるので、3つの要素があります。私はこの問題を、私が考えることができるあらゆる方法でデバッグし、この原因を見つけることができませんでした。以下に、あなたは私の単純な角度成分、それのためのHTMLテンプレートを見つけることができ、私のtypescriptですモデル、および3つのJSONオブジェクトの1の例は、私のWebサービスから返された：

角度成分：

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テンプレート：

<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ですモデル：

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 
    ) { } 
} 

と空の例：ND 3の1のプロパティの例は、私のWebサービスが（：このスクリーンショットはbabyProfiles => console.log(babyProfiles)でbabyProfiles => this.babyProfiles = babyProfilesを交換し、コンソールに結果を調べることによって撮影された注意してください）戻っているオブジェクト<li><span> </span><span></span></li>出力：

私はtypescriptですモデルとWebサービス応答の間で異なっていた。しかし、これは問題が解決しなかった下キャメルケースのプロパティ名を使用するようにtypescriptですモデルとHTMLテンプレートを変更ケーシングに気づきました。私はここで何が欠けていますか？

すべてのご協力をいただきありがとうございます。

Answer 1

私はこの問題は、サブスクライブの内側にあると思い、

ngOnInit() { 
    this.babyProfileService.getAll().subscribe((babyProfilesResult) => { 
     this.babyProfiles = babyProfilesResult; 
    }); 
} 

Answer 2

を次のように私はあなたがtemplateUrl以下上記@Componentデコレータでプロバイダを追加していないと思う、それを変更します。コンポーネント内の任意のサービスを呼び出して使用するには、プロバイダを追加する必要があります。したがって、同じものを追加してみてください。