2017-12-30 45 views
1

現在、私の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 
    ) { } 
} 

enter image description here

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

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

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

+2

あなたのバインディングを '{{babyProfile | json}} '、これはbabyProfileのJSONを出力します。あなたはそれが期待どおりに一致することを確認することができます。もう一つは、あなたのサービスが文字列だけでなくオブジェクトを返すことです。 – user184994

+0

テンプレートの 'firstName'と' birthDate'に 'FirstName'と' BirthDate'を置き換えてください。 –

+0

user184994が正しいです。 ngForで作成された構造からは、データ構造に問題があるようです。 user184994が言ったように表示すると、どこに問題があるかがわかります。 – Laker

答えて

1

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

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

になるでしょう、これは問題を解決しました。私はここの違いが実際に何であるか知りたいと思うだろう。私が知る限り、これら2つの声明(私とあなた)は機能的に同じでなければなりません。 – GregH

+0

@peggy - 元の構文は 'babyProfiles => {return this.babyProfiles = babyProfiles;と同じです。 } '([MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を参照してください)。正しい結果が得られるかどうか試してみてください。 – ConnorsFan

-1

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

+1

サービスプロバイダをapp.moduleに追加することもできます。 –

+0

サービスは私のapp.moduleに登録されています。私はあなたの提案を何とか試みたが、それは問題を解決しなかった。あなたの時間をありがとう – GregH

関連する問題