将文本绑定到角度 2 中的选定下拉列表值

Question

我在 citylist 组件模板中有一个下拉列表。

<select [(ngModel)]="selectedCity.id">
 <option *ngFor="let cty of cityarray" [ngValue]= "cty.id"> 
    {{cty.name}}
 </option>
</select>
<p> </p> <!--selected city name -->

而城市的数组是这样的：

cityarray = [new Cities(1,'Berlin'),
          new Cities(2,'London'),
          new Cities(3,'Portland'),
          new Cities(4,'Zurich'),
          new Cities(5,'Cardiff') ]

其中 Cities 类对象有一个 id 和一个 name。

我想要的是简单地打印从 para 标签内的下拉列表中选择的城市。 如果可能，如何使用 ngModel 做到这一点？还是我必须编写模型更改事件？

Answer 1

您可以像下面这样连接 ngModelChange 事件：

<select [(ngModel)]="selectedCity.id" (ngModelChange)="setCity($event)">
   <option *ngFor="let cty of cityarray" [ngValue]= "cty.id"> 
    {{cty.name}}
   </option>
</select>
<p>{{selectedCity}} </p>

组件

selectedCity:any;
setCity($event){
 this.selectedCity = this.cityarray.filter(c => return c.id == $event)[0].name;
}

希望对你有帮助！！

Answer 2

奇怪的做法是：

<select [(ngModel)]="selectedCity.id">
 <option *ngFor="let cty of cityarray" [ngValue]= "cty.id"> 
    {{cty.name}}
 </option>
</select>

<ng-container *ngFor="let cty of cityarray">
    <p *ngIf='selectedCity.id === cty.id'>
         {{cty.name}}
    </p>
</ng-container>