2017-12-30 66 views
1

현재 웹 서비스 호출의 데이터에 문제가 있습니다. 각도 모델에 올바르게 바인딩되지 않습니다. 또는 적어도 현재 문제가 있다고 생각합니다. 내 문제를 설명하는이 간단한 예는 페이지에 렌더링되는 <li></li> 요소를 나타내지 만 모두 비어 있고 그 안에 빈 스팬을 포함합니다. 내 DB에는 3 개의 항목이 포함되어 있기 때문에 3 가지 요소가 있습니다. 내가 생각할 수있는 모든 방법으로이 문제를 디버깅하여이 원인을 찾을 수 없었습니다.각도 데이터가 모델에 올바르게 바인딩되지 않았습니다.

각도 : 구성 요소 :

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 템플릿, 내 타이프 라이터 모델, 그리고 내 웹 서비스에서 반환 된 3 JSON 객체의 하나의 예를 찾을 수 있습니다 구성 요소에 대한 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> 

타이프 라이터 모델 :

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

와 빈의 예 : 차 3의 (1)에 대한 속성의 예 내 웹 서비스가 (이 스크린 샷은 babyProfiles => console.log(babyProfiles)babyProfiles => this.babyProfiles = babyProfiles를 교체 한 후 콘솔에서 결과를 검사하여 찍은 주) 반환하는 객체 <li><span> </span><span></span></li> 출력 : enter image description here

나는 케이스 내 타이프 라이터 모델과 웹 서비스 응답 사이 달랐다 발견하고 그러나 이렇게해도 문제가 해결되지 않은 낮은 낙타의 경우 속성 이름을 사용하도록 타이프 라이터 모델과 HTML 템플릿을 변경했습니다. 내가 여기서 무엇을 놓치고 있니?

모든 도움을 주실 수 있습니다.

+2

바인딩을 '{{babyProfile | json}}', 이는 babyProfile의 JSON을 출력합니다. 그런 다음 원하는 내용과 일치하는지 확인할 수 있습니다. 확인해야 할 다른 것은 여러분의 서비스가 객체를 반환한다는 것입니다. – user184994

+0

은 템플릿의'firstName'과'birthDate'를'FirstName'과'BirthDate'로 바꿉니다. –

+0

user184994가 맞습니다. ngFor에서 만든 구조에서 데이터 구조에 문제가있는 것처럼 보입니다. user184994가 말한대로 표시하면 문제가있는 곳을 볼 수 있습니다. – Laker

답변

1

은 내가 구독 난 당신이 templateUrl 아래 위 @Component 데코레이터에 공급자를 추가하지 않은 생각

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

안에 들어가면 문제가 해결되었습니다. 그 차이가 실제로 무엇인지 궁금 할 것입니다. 내가 아는 한,이 두 진술 (내 것과 당신)은 기능적으로 동일해야합니다. – GregH

+0

@peggy - 원래 구문은'babyProfiles => {return this.babyProfiles = babyProfiles;와 같습니다. }'([MDN 문서] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 참조). 올바른 결과를 얻을 수 있는지 알아보기 위해 시도해 볼 수 있습니다. – ConnorsFan

-1

을 다음과 같이 변경 내부에 문제가있다 생각한다. 구성 요소에서 모든 서비스를 호출하고 사용하려면 공급자를 추가해야합니다. 그래서, 같은 것을 추가하십시오.

+1

서비스 공급자를 app.module에 추가 할 수도 있습니다. –

+0

서비스가 내 app.module에 등록되었습니다. 나는 당신의 제안을 어떤 식 으로든 시도했으나 문제를 해결하지 못했습니다. 그래도 고마워. – GregH