<img src=""> ionic 3 中的 ngModel 值

Question

我正在尝试在我的应用程序中实现天气预报。我正在使用丹麦国家天气预报 servlet。我唯一需要更改的是邮政编码，在本例中为 8000。我尝试了一些不同的东西，例如：src="http://......"+'{{city.postNumber}}'+".. ”，但这没有用。有任何想法吗？这可能很简单，但我想不通。

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

我知道缺少实际更改值的脚本，但 city.postNumber 在 .ts 中设置为 8000。

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

Answer 1

做这样的事情- 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`
  }

<img src=""> ionic 3 中的 ngModel 值

ngModel value in <img src=""> ionic 3

image

src

ionic-framework