Angular 4 firebase 下拉选择标签选项

Posted 2023-03-08

【中文标题】Angular 4 firebase 下拉选择标签选项

【英文标题】：Angular 4 firebase dropdown select tag option

【发布时间】：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;
  

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

【问题讨论】：

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

【参考方案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>