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>