Привязать текст к выбранному значению раскрывающегося списка в угловых 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 имеет идентификатор и имя.

Я хочу просто напечатать город, выбранный из выпадающего списка внутри тегов 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>