Wie div Element bei Änderung mit Winkel 2 zu füllen wählen?

Question

Dies ist mein HTML-Template

<form #animalForm="ngForm"> 
<div class="animal-profile-search"> 
    <input type="text" class="animal-profile-search-bar" placeholder="Enter Animal Name"> 
    <select [(ngModel)]="animal" class="animal-profile-select" (ngModelChange)="onSelect($event)" ngControl="animal"> 
     <option *ngFor="#animal of animals" [ngValue]="animal">{{animal.common}}</option> 
    </select> 
</div> 
<div class="animal-profile-body"> 
    <div class="animal-profile-name"> 
     <div class="animal-profile-label">Common Name:</div> 
     <div class="animal-profile-value">{{animal.common}}</div> 
     <div class="animal-profile-label">Scientific Name:</div> 
     <div class="animal-profile-value">Value</div> 
    </div> 
    <div class="animal-profile-image"></div> 
    <div class="animal-profile-natural-history"> 
     {{animal | json}} 
    </div> 
</div> 

und die Komponente

import { Component } from '@angular/core'; 
import { AnimalService } from '../services/animal.service'; 
import { Animal } from '../DTOModels/animal'; 
import { Http, HTTP_PROVIDERS } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'data-result', 
    templateUrl : './app/components/animal-profile.component.html', 
    providers: [HTTP_PROVIDERS,AnimalService], 
    inputs: ['animals', 'animal'] 
}) 

export class AnimalProfile{ 
    animals: Array<any>; 
    animal: Animal; 
    constructor(http: Http){ 
     http.get("/animals") 
      .map(res => res.json()) 
      .subscribe(animals => this.animals = animals, 
         error => console.log("Error:" +error), 
         ()=>this.animal = this.animals[0]); 


    } 

    onSelect(inAnimal: Animal){ 
     this.animal = inAnimal; 
     var common = document.getElementById('common'); 

     console.log(this.animal.latin); 
    } 
} 

Die oben zeigt die json für das Modell richtig gewählt, aber es mich nicht den richtigen Wert für die zeigen lassen allgemeiner Name, der ein Parameter des Tiermodells ist. Ich habe viele verschiedene Dinge ausprobiert, so hat ngModel mit in die div platziert, nichts bis zu diesem Punkt hat funktioniert. Ich würde mich über jede Einsicht freuen, die jemand in Bezug auf dieses Problem haben könnte. Ich lerne immer noch die neue Syntax mit Angular 2 und bin dabei, nur JQuery zu verwenden, um die Elemente zu füllen. Ich möchte wirklich nur mit der Art und Weise wie Angular 2 arbeiten. Die Idee wäre, dass ein Benutzer ein Tier in der Liste auswählt und dann die folgenden Werte aufgefüllt werden.

Nochmals vielen Dank.

Answer 1

Sie erhalten Ihre Daten mit einem asynchronen HTTP-Aufruf. Wenn die Vorlage also zum ersten Mal gerendert wird, sind die Eigenschaften animals und animal nicht definiert. Sie können die safe navigation operator zum Schutz vor unbestimmt und NULL-Werte verwenden:

{{animal?.common}} 

Beachten Sie, dass {{animal | json}} funktioniert, weil die JsonPipe schützt vor undefiniert und Nullwerte.