Angular 4 firebase 下拉选择标签选项答案

【问题标题】：Angular 4 firebase dropdown select tag optionAngular 4 firebase 下拉选择标签选项
【发布时间】：2018-05-09 04:30:44
【问题描述】：

我正在使用 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;
  }

}

我可以从下拉列表中选择属性，但属性位置未显示在输入字段中。感谢您的帮助。

【问题讨论】：

你可以使用，我相信这会解决你的问题

标签： html angularjs angular firebase firebase-realtime-database

【解决方案1】：

使用 ngModel 代替值

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

【讨论】：

【解决方案2】：

默认情况下，从下拉列表中选择选项会选择所选 option 标记中提供的任何值。因此，当您在下拉列表中选择任何值时，它会将propertyName 放入相应的ngModel 中。

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

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

【讨论】：