どのように選択した角度変化にdiv要素を移入するには？

Question

は、これは私のHTMLテンプレート

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

とコンポーネント

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

上記ディスプレイ正しい選択されたモデルのためのJSONですが、それは文句を言わない私が正しい値を表示してみましょう動物モデルのパラメータである共通名。私はそのようにはdivの中でngModelを配置しており、多くの異なるものを試してみましたが、ここまで何も働いていません。私は、誰もがこの問題に関連しているかもしれないどんな洞察にも感謝します。私はAngular 2で新しい構文を学んでいますが、JQueryを使用して要素を移入しようとしています。私は本当に物事を行う角度2の方法に固執したいと思います。このアイデアは、ユーザーがリスト内の動物を選択し、次に以下の値が入力されます。

もう一度おねがいします。

Answer 1

非同期HTTP呼び出しを使用してデータを取得しているため、テンプレートが最初にレンダリングされたときに、animalsおよびanimalプロパティは定義されません。

{{animal?.common}} 

注意を未定義とnull値に対するJsonPipeガードため{{animal | json}}作品ということ：あなたは未定義とnull値を防ぐためにsafe navigation operatorを使用することができます。あなたの応答のための