현재 웹 서비스 호출의 데이터에 문제가 있습니다. 각도 모델에 올바르게 바인딩되지 않습니다. 또는 적어도 현재 문제가 있다고 생각합니다. 내 문제를 설명하는이 간단한 예는 페이지에 렌더링되는 <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
) { }
}
와 빈의 예 : 차 3의 (1)에 대한 속성의 예 내 웹 서비스가 (이 스크린 샷은 babyProfiles => console.log(babyProfiles)
와 babyProfiles => this.babyProfiles = babyProfiles
를 교체 한 후 콘솔에서 결과를 검사하여 찍은 주) 반환하는 객체 <li><span> </span><span></span></li>
출력 :
나는 케이스 내 타이프 라이터 모델과 웹 서비스 응답 사이 달랐다 발견하고 그러나 이렇게해도 문제가 해결되지 않은 낮은 낙타의 경우 속성 이름을 사용하도록 타이프 라이터 모델과 HTML 템플릿을 변경했습니다. 내가 여기서 무엇을 놓치고 있니?
모든 도움을 주실 수 있습니다.
바인딩을 '{{babyProfile | json}}', 이는 babyProfile의 JSON을 출력합니다. 그런 다음 원하는 내용과 일치하는지 확인할 수 있습니다. 확인해야 할 다른 것은 여러분의 서비스가 객체를 반환한다는 것입니다. – user184994
은 템플릿의'firstName'과'birthDate'를'FirstName'과'BirthDate'로 바꿉니다. –
user184994가 맞습니다. ngFor에서 만든 구조에서 데이터 구조에 문제가있는 것처럼 보입니다. user184994가 말한대로 표시하면 문제가있는 곳을 볼 수 있습니다. – Laker