Question

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

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

properties.component.html

＆＃13;

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

＆＃13;

properties.component.ts

＆＃13;

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

＆＃13;

我可以从下拉列表中选择属性，但属性位置不会出现在输入字段中。我很感激你的帮助。

Answer 1

而不是值使用ngModel

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

Answer 2

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

中

如果要在选项中选择整个对象使用ngValue，那么当用户选择一个选项时，它将删除ngValue对象值并将其分配给{{1}的ngModel 1}} field。

select

Angular 4 firebase下拉选择标记选项

2 个答案: