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，但它不会让我显示通用名称的正确值，这是动物模型的参数。我尝试了很多不同的东西，例如将ngModel放在div中，没有达到这一点的效果。我很感激任何人可能对这个问题有任何见解。我仍然在学习Angular 2的新语法，并且即将使用JQuery来填充元素。我真的只想坚持Angular 2的做事方式。想法是让用户在列表中选择动物，然后填充下面的值。

再次感谢。

Answer 1

您正在使用异步HTTP调用获取数据，因此在首次呈现模板时，未定义animals和animal属性。您可以使用safe navigation operator来防范未定义和空值：

{{animal?.common}}

请注意{{animal | json}}有效，因为JsonPipe可以防范未定义和空值。

如何使用angular 2 select选择填充div元素？

1 个答案: