Question

我正在尝试在我的应用中实施天气预报。我正在使用丹麦国家天气预报服务。我唯一要改变的是邮政编码，在这种情况下是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设置为8000 in .ts。

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=""/>离子3

1 个答案: