错误类型错误：无法读取未定义的demographic.component.html：3的属性“FirstName”

Question

我正在学习角度。在这里，我将人口统计组件作为标签，它将用于个人组件。它显示我的错误为demographic.component.html：3 ERROR TypeError：无法读取未定义的属性'FirstName'
如果有人想要解决它，我已经将它上传到stackblitz链接上了 https://stackblitz.com/edit/angular-6uhfoz

person.json

{
    "Demographics" : { 
            "ProfileId":1,
            "FirstName":"vinit"
           }

}

demographic.component.ts

import { Component, OnInit } from '@angular/core';
import * as jwt from 'angular2-jwt/angular2-jwt';
import { CardModule } from 'primeng/card';
import { ScrollPanelModule } from 'primeng/scrollpanel';
import { PersonListService,Person} from './person-list.service';

@Component({ 
  moduleId: module.id,
  selector: 'sd-demographic',
  templateUrl: 'demographic.component.html',
  styleUrls: ['demographic.component.css']
})
export class DemographicComponent implements OnInit {
    errorMessage: string;
    persons: Person;
    constructor(public personListService:PersonListService){}
    ngOnInit() {
       // console.log(jwt.AuthConfig);
       this.getperson();
    }

    getperson(){

      this.personListService.getDemographic()
      .subscribe(
       resp => this.persons = resp.Persons,

        //resp => this.addresses = resp.Addresses,
        error => this.errorMessage = <any>error
      );
 }
}

demographic.component.html

 <ul>
        <li><b>Demographics</b></li>
        <li>FirstName:{{ persons.FirstName }}</li>
    </ul>

person.component.ts

import { Component, OnInit } from '@angular/core';
import * as jwt from 'angular2-jwt/angular2-jwt';
import { PersonListService} from './person-list.service';

/**
 * This class represents the lazy loaded PersonComponent.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-person',
  templateUrl: 'person.component.html',
  styleUrls: ['person.component.css']
})
export class PersonComponent implements OnInit {
  /*errorMessage: string;

*/
constructor(public personListService:PersonListService){}
  ngOnInit() {
     // console.log(jwt.AuthConfig);
     //this.getperson();
  }


 }

人-list.service.ts

import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs/Observable';
    // import 'rxjs/add/operator/do';  // for debugging
    export class Person{

      ProfileId:number;
      FirstName:string="";
    }

    }

    /**
     * This class provides the NameList service with methods to read names and add names.
     */
    @Injectable()
    export class PersonListService {

      /**
       * Creates a new NameListService with the injected HttpClient.
       * @param {HttpClient} http - The injected HttpClient.
       * @constructor
       */
      constructor(private http: HttpClient) {}

      /**
       * Returns an Observable for the HTTP GET request for the JSON resource.
       * @return {string[]} The Observable for the HTTP request.
       */
      getDemographic(): Observable<{Persons: Person}>{
        console.log("Inside the get service")
        return this.http.get('app/person/person.json')

                     // .do(data => console.log('server data:', data))  // debug
                        .catch(this.handleError);

      }

person.component.html

<p-tabView>
    <p-tabPanel header="Demographics">

        <sd-demographic></sd-demographic>

    </p-tabPanel>
</p-tabView>