用户界面没有显示角度2中的服务器数据

我是角度2的新手，并开始学习概念。我有一个组件在与我的控制器绑定时不显示数据。尽管如此，用户界面仍然使用硬编码数据加载。
这里是我的组件个人details.component.ts用户界面没有显示角度2中的服务器数据

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:"[email protected]", 
     // 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 = "[email protected]", 
      ContactNumber ="1112224356" 
     }; 
     [HttpGet("[action]")] 
     public IActionResult GetPersonalDetails() 
     { 
      return new ObjectResult(_personalDetailsEntities); 
     } 
    } 
}

在调试我发现，它是要求Name属性这已经是一个部分的回应。任何帮助将不胜感激。下文提到的是铬调试

ERROR TypeError: Cannot read property 'Name' of undefined at Object.eval [as updateRenderer] (PersonalDetailsComponent.html:12) at Object.debugUpdateRenderer [as updateRenderer] (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:24216) at checkAndUpdateView (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23363) at callViewAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23723) at execComponentViewsAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23655) at checkAndUpdateView (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23364) at callViewAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23723) at execEmbeddedViewsAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23681) at checkAndUpdateView (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23359) at callViewAction (vendor.js?v=RCvRrqPvM2Kc5BlkEQ045FeXR6gPMRIwfn51ludN14I:sourcemap:23723)

个人details.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>

来源

2017-09-25 sandeep

使用堆栈跟踪在HTML（PersonalDetailsComponent.html：12）

{{DetailsObtained?.name}}

“ ？ - 表示详细信息可以是未定义的（对于来自服务器的数据，它未定义，而w w8）

并且你不会有这个错误。对于组件

更好地利用解析器和渲染您的组件

来源

2017-09-25 13:41:42

喜АлександрПетрик数据：感谢您的答复。我试过{{DetailsObtained？.name}}，但那不起作用。您能否详细阐述一下如何使用组件的解析器？ – sandeep

此链接安全导航操作员（https://angular.io/guide/template-syntax#the-safe-navigation-operator-and-null-property-paths）。你可以添加你的HTML问题和你的细节变量的输出？ –

感谢您分享链接。我已经在问题中添加了html以供参考。添加Angular安全导航运算符（？。）后，我看不到空引用错误，但它给我500内部服务器错误。在我的服务中看起来有点不妥。 – sandeep

好之前，从你的服务器中的所有数据，所以以后一定努力，我可以找出以下几点：1。为了获得JSON输出显示在使用angular/typescript的UI，结果必须采用集合形式。 this.entity =结果不起作用。相反，this.entityCollection =结果为json（）将工作 2.内部服务器错误是因为结果集的格式不正确。修正结果集的格式后，我能看到的UI

感谢所有

来源

2017-10-03 02:20:27 sandeep

用户界面没有显示角度2中的服务器数据

回答

相关问题