Angular 数据未正确绑定到模型

Question

我目前遇到的问题是来自我的网络服务调用的数据没有正确绑定到我的 angular 模型（或者至少我目前认为这是问题所在）。这个简单的示例说明了我的问题，导致 <li></li> 元素在页面上呈现，但它们都是空白的，并且内部包含空跨度。有 3 个元素，因为我的数据库中有 3 个条目。我已经用我能想到的所有方法调试了这个问题，但一直找不到原因。在下面，您可以找到我的简单 angular 组件、它的 html 模板、我的打字稿模型，以及从我的 Web 服务返回的 3 个 json 对象之一的示例：

Angular 分量：

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>

打字稿模型：

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

以及我的 Web 服务返回的 3 个对象中的 1 个的属性示例（注意：此屏幕截图是通过将 babyProfiles => this.babyProfiles = babyProfiles 替换为 babyProfiles => console.log(babyProfiles) 然后在控制台中检查结果而截取的） :

以及空 <li><span> </span><span></span></li> 输出的示例：

我注意到我的打字稿模型和 Web 服务响应的大小写不同，并更改了打字稿模型和 html 模板以使用小驼峰属性名称，但这并没有解决问题.我在这里错过了什么？

感谢所有帮助。

Answer 1

我猜是subscribe的问题，修改如下

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

Answer 2

我想你没有在上面的templateUrl 下面的@Component 装饰器中添加提供者。要调用和使用组件中的任何服务，我们需要添加提供者。所以，尝试添加相同的内容。

Angular 数据未正确绑定到模型

Angular data not binding to model correctly

json

typescript

angular-components

angular