Text an eine ausgewählte Dropdown-Liste Wert in Winkel 2

Question

binden Ich habe eine Dropdown-Liste in einer Citylist Komponente Vorlage.

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

Und die Anordnung von Stadt ist wie folgt:

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

wo Städte Klassenobjekt hat eine id und einen Namen.

Was ich will, ist einfach die Stadt gedruckt aus der Dropdown-Liste innerhalb der Para-Tags gedruckt. Wenn möglich, wie kann dies unter Verwendung ngModel getan werden? oder muss ich ein Modellereignis schreiben?

Answer 1

Odd Art und Weise, dies zu tun ist:

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

Answer 2

Sie anschließen können ngModelChange Event wie:

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

Komponente

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

Hoffe, es hilft !!