Soy un novato en Angular. Lo que estoy haciendo es cargar datos del archivo json al hacer clic, lo que hasta ahora he hecho correctamente.
Pero el punto donde estoy atascado es cargar el primer objeto json antes de hacer clic, es decir, cargar el primer objeto cuando se carga la página
Mecanografiado
export class RequestComponent{ people: Object[]; constructor(http:Http){ http.get('data.json').subscribe(res => { this.people = res.json(); }); } public currentStatus; public setThis = (people) => this.currentStatus = people; }html
<ul class="col-md-4"> <li *ngFor="let person of people" (click)="setThis(person)"> <span><i class="fa fa-cog" aria-hidden="true"></i></span> <p>{{ person.name }}</p> </li> </ul> <div *ngIf="currentStatus" class="col-md-8 right-section"> <h2>{{ currentStatus.name }}</h2> <img [src]="currentStatus.img" class="img-responsive"/> </div>Intente cargar json en la función ngOnInit().
import { Component, OnInit } from '@angular/core'; // other imports export class RequestComponent implements ngOnInit{ people: Object[]; constructor(private http:Http){} ngOnInit(){ this.http.get('data.json').subscribe(res => { this.people = res.json(); }); } } Y agregando ngIf para mostrar sus registros, por lo que no intenta mostrarlo antes de que se carguen las people .
<ul *ngIf="people" class="col-md-4"> <li *ngFor="let person of people" (click)="setThis(person)"> <span><i class="fa fa-cog" aria-hidden="true"></i></span> <p>{{ person.name }}</p> </li> </ul> <div *ngIf="currentStatus" class="col-md-8 right-section"> <h2>{{ currentStatus.name }}</h2> <img [src]="currentStatus.img" class="img-responsive" /> </div>Por lo general, su página se cargará más rápido de lo que puede obtener una respuesta de su API, por lo que debe configurar personas dentro de la suscripción, después de recibir la respuesta, para que pueda estar seguro de que la ha recibido.
constructor(private http:Http){ this.http.get('data.json').subscribe(res => { this.people = res.json(); if(this.people && this.people.length>0) this.setThis(this.people[0]); }); }Dependiendo de su implementación, puede ser más apropiado hacer if para asegurarse de que la matriz de personas no esté vacía dentro de setThis.
Alternativamente, puede cambiar su html para que sea así
<ul class="col-md-4"> <li *ngFor="let person of people" (click)="setThis(person)"> <span><i class="fa fa-cog" aria-hidden="true"></i></span> <p>{{ person.name }}</p> </li> </ul> <div *ngIf="currentStatus>-1" class="col-md-8 right-section"> <h2>{{ people[currentStatus]?.name }}</h2> <img [src]="people[currentStatus]?.img" class="img-responsive"/> </div>Cambie el estado actual a un número y establezca el valor predeterminado en 0. Esto le permitiría evitar el problema de asignar el estado actual a la primera persona, tan pronto como haya una persona, el html se actualizará. Si alguna vez necesitó deshabilitar la visualización de la parte de estado actual, simplemente configúrelo en -1.
Él ? antes de que .name e .img le digan al html que verifique que el objeto existe antes de intentar acceder al nombre o img, si no existe, no muestra esa parte.
Prueba esto:
constructor(private http:Http){ this.http.get('data.json').subscribe(res => { this.people = res.json(); }); } ngAfterViewInit(){ this.setThis(this.people[0]); }