ngModellwert in <img src=""> ionic 3

Question

Ich versuche, eine Wettervorhersage in meiner App zu implementieren. Ich benutze das dänische Wettervorhersageservlet. Das einzige, was ich ändern muss, ist die Postleitzahl, die in diesem Fall 8000 ist. Ich habe verschiedene Dinge ausprobiert: src = "http: // ......" + '{{city.postNumber}} '+ "...", aber das hat nicht funktioniert. Irgendwelche Ideen? Das könnte einfach sein, aber ich kann es nicht herausfinden.

<ion-content padding> 
    <ion-item> 
    <ion-input [(ngModel)]="city.postNumber">8000</ion-input> 
    <img id="dk_days_two_forecast" 
    src="http://servlet.dmi.dk/byvejr/servlet/byvejr_dag1?by=8000&mode=long" 
    alt="Weather forecast"/> 
    </ion-item> 
</ion-content> 

Ich weiß, dass ein Skript zum tatsächlichen Ändern des Werts fehlt, aber city.postNumber ist auf 8000 in .ts eingestellt.

export class WeatherPage { 
    city = {postNumber:"8000"}; 
    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    } 

Answer 1

Sie so etwas wie this- Plunker

HTML:

<ion-item> 
    <ion-label color="primary">Post Number</ion-label> 
    <ion-input [(ngModel)]="city.postNumber"></ion-input> 
    </ion-item> 
    <ion-item> 
    <button ion-button block (click)="refresh()">Get</button> 
    </ion-item> 

    <ion-item> 
    <img [src]="imgSrc" alt="Weather forecast" /> 
    </ion-item> 

TS:

city:any = {postNumber:"8000"}; 
    imgSrc:any=`http://servlet.dmi.dk/byvejr/servlet/byvejr_dag1?by=${this.city.postNumber}&mode=long` 

    constructor(public navController: NavController) { } 
    refresh() { 
    this.imgSrc = `http://servlet.dmi.dk/byvejr/servlet/byvejr_dag1?by=${this.city.postNumber}&mode=long` 
    }