Angular 4 Firebase下拉选择标签选项

Question

我正在使用Angular 4和firebase。 我正在尝试为属性列表构建一个下拉选择器。

从下拉列表中选择属性后，属性位置应出现在下面的另一个输入字段中。

properties.component.html

 <select [(ngModel)]="selectedProperty" (change)="onSelect($event, property)"> <option>--select property--</option> <option *ngFor="let property of properties">{{property.propertyName}}</option> </select> <div *ngIf="selectedProperty"> <label >Location </label> <input type="text" value="{{selectedProperty.location}}"> </div> 

properties.component.ts

 import { Component, OnInit } from '@angular/core'; import { PropertyService } from './../services/property.service'; import { Property } from './../models/property'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'app-property-list', templateUrl: './property-list.component.html', styleUrls: ['./property-list.component.scss'] }) export class PropertyListComponent implements OnInit { properties: Observable<Property[]>; selectedProperty: Property; constructor(private propertyService: PropertyService) {} ngOnInit() { this.propertyService.getProperties().subscribe(properties => { this.properties = properties; }) } onSelect(event, property: Property){ this.selectedProperty = property; } } 

我可以从下拉列表中选择属性，但是属性位置不会出现在输入字段中。 多谢您的协助。

Answer 1

代替值使用ngModel

<div *ngIf="selectedProperty">
    <label >Location </label>
    <input type="text"  [(ngModel)]="selectedProperty.location">
</div>

Answer 2

默认情况下，从下拉菜单中选择option选择所选option标签中提供的任何值。 因此，当您在下拉列表中选择任何值时，会将propertyName放在各自的ngModel 。

当您要选择整个对象时，请使用ngValue选项，当用户选择一个选项时，它将ngValue对象值并将其分配给select字段的ngModel。

<option [ngValue]="property" *ngFor="let property of properties">
  {{property.propertyName}}
</option>