时间戳

首页 > 解决方案 > 无线电组改变值

angular - 无线电组改变值

问题描述

我正在尝试使用 ionic 4 和 angular 制作天气应用程序。我有多个城市，所以我想使用无线电组通过坐标值来改变城市。我的问题是当我运行我的应用程序时，我没有从数据 json 得到任何结果！我得到了未定义的。即使检查也不起作用，所以我必须检查手册

广播组：

<ion-list>
  <ion-radio-group [(ngModel)]="cities">
    <ion-list-header>
    <ion-label>Name</ion-label>
  </ion-list-header>

  <ion-item>
    <ion-label>Muscat</ion-label>
    <ion-radio slot="start" value="26.2105,56.244" checked></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Dubia</ion-label>
    <ion-radio slot="start" value="26.161722,56.23672"></ion-radio>
  </ion-item>

  </ion-radio-group>
</ion-list>

代码 ：

export class Tab1Page {
  weather:any;
  cities: string;

  constructor(private https: HttpClient) {
    this.test()
  }

  onCitiesChanged(data){
    console.log(data.detail.value);
  }

  async test (){
    this.https.get('weather/'+this.cities+'.json')
      .subscribe(data => {
        this.weather = data
    })
  }
}

url 结果控制台weather/undefined.json

标签： angularionic4

解决方案

从文档中，您可以使用ionChange事件，也可以使用ngModel. 如果要在cities分配或更改时使用选定的值，则需要使用ionChange事件。请参阅下面的代码，该代码会在值更改时进行 http 调用。

关于ionChange

当您订阅ionChange该方法时，第一次初始化时会被触发。您不必在组件/打字稿文件中设置附加值。您不应该在构造函数中进行任何调用，并且在这种情况下也没有必要，因为一旦设置了值，就会触发方法回调，这发生在 html 被呈现后，因为 html 正在分配初始选择与checked属性。

代码

堆栈闪电战

模板.html

<ion-list>
    <ion-radio-group (ionChange)="onCitiesChanged($event)" [(ngModel)]="cities">
        <ion-list-header>
            <ion-label>Name</ion-label>
        </ion-list-header>

        <ion-item>
            <ion-label>Muscat</ion-label>
            <ion-radio slot="start" value="26.2105,56.244" checked></ion-radio>
        </ion-item>

        <ion-item>
            <ion-label>Dubia</ion-label>
            <ion-radio slot="start" value="26.161722,56.23672"></ion-radio>
        </ion-item>
    </ion-radio-group>
</ion-list>

组件.ts

constructor(private https: HttpClient) {/* nothing else */}

cities: string;
onCitiesChanged(data){
    this.https.get('weather/'+this.cities+'.json')
      .subscribe(data => this.weather = data);
}

推荐阅读