UI is not showing server data in angular 2

Question

I am a novice in angular 2 and started learning the concepts. I have a component which is not showing data when bound with my controller. The Ui gets loaded with hard coded data though.
Here is my Component personal-details.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:"[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();
    }
}

Controller: 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);
        }
    }
}

On debugging I found that it is asking for Name property which is already a part of the response. Any help would be highly appreciated. Below mentioned is the stack trace from chrome debugger

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)

Personal-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>

Александр Петрик Александр Петрик · Accepted Answer · 2017-09-25T13:41:42

Use in your html (PersonalDetailsComponent.html:12)

{{DetailsObtained?.name}}

'?' - said that DetailsObtained can be undefined (it undefined while u w8 for data from server)

and u will not have this mistake.

Better use resolvers for component and get all data from your server before rendering your component

UI is not showing server data in angular 2

2 Answers