UI 未以角度 2 显示服务器数据答案

【问题标题】：UI is not showing server data in angular 2UI 未以角度 2 显示服务器数据
【发布时间】：2018-03-06 11:52:35
【问题描述】：

我是 Angular 2 的新手，开始学习这些概念。我有一个组件在与我的控制器绑定时不显示数据。不过，UI 会加载硬编码数据。
这是我的组件个人详细信息.component.ts

import { Component, OnInit, Input} from '@angular/core';
import { PersonalDetails } from '../Shared/personal-details.type';
import { PersonalDetailsService } from '../services/personal-details.service';


@Component({
    selector: 'personal-details',
    templateUrl: './personal-details.component.html'
})
export class PersonalDetailsComponent implements OnInit {
    @Input() DetailsObtained: PersonalDetails;
    constructor(private personalDetailsService: PersonalDetailsService) {
        //this.DetailsObtained = {            
        //    Address : "from client",
        //    ContactNumber : "1112225436",
        //    EmailAddress:"client@gmail.com-client",
        //    Name : "sandeep"
        //}
    }
    ngOnInit(): void {
        this.personalDetailsService.getPersonalDetails().
            then(details => {
                this.DetailsObtained = details
            });

    }
}
Service
personal-details.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/Rx';

import {PersonalDetails} from '../Shared/personal-details.type';

@Injectable()

export class PersonalDetailsService {
    constructor(private http: Http) {

    }
    getPersonalDetails() {
        var personalDetails = this.http.get('api/PersonalDetails/GetPersonalDetails')
            .map(response => response.json() as PersonalDetails).toPromise();
        return this.http.get('api/PersonalDetails/GetPersonalDetails')
            .map(response => response.json() as PersonalDetails).toPromise();
    }
}

控制器： PersonalDetailsController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Skills.Entities;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace Skills.Controllers
{
    [Route("api/[controller]")] // api/PersonalDetails
    public class PersonalDetailsController : Controller
    {
        private static PersonalDetailsEntities _personalDetailsEntities = new PersonalDetailsEntities()
        {
            Name = "Sandeep Dutta- server",
            Address = "from  server",
            EmailAddress = "server@gmail.com",
            ContactNumber ="1112224356"
        };
        [HttpGet("[action]")]
        public IActionResult GetPersonalDetails()
        {
            return new ObjectResult(_personalDetailsEntities);
        }
    }
}

在调试时，我发现它要求的 Name 属性已经是响应的一部分。任何帮助将不胜感激。下面提到的是来自 chrome 调试器的堆栈跟踪

错误类型错误：无法读取未定义的属性“名称” 在 Object.eval [作为 updateRenderer] (PersonalDetailsComponent.html:12) 在 Object.debugUpdateRenderer [as updateRenderer] (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:24216) 在 checkAndUpdateView (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23363) 在 callViewAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23723) 在 execComponentViewsAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23655) 在 checkAndUpdateView (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23364) 在 callViewAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23723) 在 execEmbeddedViewsAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23681) 在 checkAndUpdateView (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23359) 在 callViewAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23723)

个人详细信息.component.html

 <div class="panel panel-default panel-primary">
  <div class="panel-heading">
        <h3>Some basic personal information!</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <p>Full Name:</p>
            </div>
            <div class="col-md-6">
                {{ DetailsObtained?.Name  }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <p>Address:</p>
            </div>
            <div class="col-md-6">
                {{ DetailsObtained?.Address   }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <p>EmailAddress:</p>
            </div>
            <div class="col-md-6">
                {{ DetailsObtained?.EmailAddress }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <p>ContactNumber:</p>
            </div>
            <div class="col-md-6">
                {{ DetailsObtained?.ContactNumber | formatPhoneNumber }}
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： angular angular2-services

【解决方案1】：

在你的 html 中使用 (PersonalDetailsComponent.html:12)

{{DetailsObtained?.name}}

'?' - 说DetailsObtained可以是未定义的（它未定义而你w8来自服务器的数据）

你不会犯这个错误的。

在渲染组件之前最好为组件使用解析器并从服务器获取所有数据

【讨论】：

嗨 Александр Петрик：感谢您的回复。我试过 {{DetailsObtained?.name}} 但这不起作用。您能否详细说明如何为组件使用解析器？
安全导航操作员上的此链接 (angular.io/guide/…)。您可以将您的 html 添加到您的详细信息变量的问题和输出中吗？
感谢分享链接。我在问题中也添加了 html 供您参考。添加 Angular 安全导航运算符 (?.) 后，我不再看到空引用错误，但它给了我 500 内部服务器错误。我的服务似乎出了点问题。
所以现在不是角度问题

【解决方案2】：

好的，所以经过一定的努力，我可以弄清楚以下几点：

为了使用 angular/typescript 在 UI 上显示 json 输出，结果必须采用集合的形式。 this.entity = result 将不起作用。相反 this.entityCollection = result as json() 会起作用
内部服务器错误仅是因为结果集格式错误。更正结果集的格式后，我可以在 UI 上看到数据了

谢谢大家

【讨论】：