Remove Object from this Angular5

I pick up a list of People that is an Array in JSON and I put it in a this which in turn I keep it in a that it is accessible.

The problem is that when I pass the that to another class I can not access the Array of people I saved.

import { Component, OnInit,Input } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Person } from '../class/personClass';
import { ConexionPersonService } from '../conexion-person.service';

@Component({
    selector: 'app-detail-user',
    templateUrl: './detail-user.component.html',
    styleUrls: ['./detail-user.component.css']
})
export class DetailUserComponent implements OnInit {

    detailPerson: Person;
    People:Person[];
    @Input() id;
    that;

    constructor(
        private route: ActivatedRoute,
        private conexion: ConexionPersonService) { }

    ngOnInit() {
        this.id = +this.route.snapshot.paramMap.get('id');
        this.getPeople(); 
        this.getPerson();
    }

    getPeople(): void { 
        this.that = this;
        this.conexion.getPeople()
            .subscribe(People => this.that.People = People);
    }

    getPerson(): void { 
         this.detailPerson = this.conexion.getPerson(this.that,this.id); 
     } 
}

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { catchError, map, tap } from 'rxjs/operators';

import { of } from 'rxjs/observable/of';
import { Person } from './Class/personClass';

@Injectable()
export class ConexionPersonService {

    person : Person;

    constructor(
        private http: HttpClient,
    ) { }

    public getPeople(): Observable<Person[]> {

        const url = 'assets/Json/listPerson.json';
        //console.log('llego');

        return this.http.get<Person[]>(url)
            .pipe(
                //tap(heroes => this.log('fetched heroes')),
                catchError(this.handleError('getPosts', []))
            );
    }

    public getPerson(People:Person[] , id:number): Person{

        //console.log( "dentro de conexion array" , People);
        //console.log( "dentro de conexion id" , id);
        console.log("En conexion" , People);
        for (var i = 0 ; i < People.length; i++){
            if(People[i].id_user == id ){
                this.person = People[i];
            }
        } 
        console.log("array" , this.person);
        return  this.person;
    }


    /**
      * Handle Http operation that failed.
      * Let the app continue.
      * @param operation - name of the operation that failed
      * @param result - optional value to return as the observable result
      */
    private handleError<T>(operation = 'operation', result?: T) {
        return (error: any): Observable<T> => {
            // TODO: send the error to remote logging infrastructure
            console.error(error); // log to console instead 
            // Let the app keep running by returning an empty result.
            return of(result as T);
        };
    }
}

Red pencil: The log of the class connection:

Blue pencil: you can see how there is an array of 6 elements and at the same time there is a People: undefined thing that I understand that the People variable that I have in DetailUserComponent is never assigned a value.

You can also see that I bring the other objects of the DetailUserComponent class

Black pencil: It is an infinite loop, a that containing DetailUserComponent that contains a that ....

Problem: I want to be able to traverse that array and return the object whose id_user will return to me, but there is no way ....