无线电组变化值

Question

我试图使用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

Answer 1

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

关于ionChange

的注释

当您订阅ionChange时，该方法在首次初始化时被激发。您不必在组件/打字稿文件中设置其他值。您不应该在构造函数中进行任何调用，并且在这种情况下是没有必要的，因为一旦设置了值，就会立即触发方法回调，而在将html呈现为html会使用checked属性分配初始选择。

代码

Stackblitz

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

component.ts

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

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

Answer 2

您正在构造函数中调用test()，因此不建议这样做。另外，您还没有为cities设置初始值，因此它应该正确为undefined。

此外，请勿使用checked，将初始值设置为ngModel，例如：

cities = '26.2105,56.244'

checked在这里无效，因为cities是undefined。

用户选择一个选项后发生点击事件或其他事件，然后调用test。这是一个选项，或者至少在OnInit中调用它。我坚信，constructor中不需要调用的任何内容都不应该。为此，我们有OnInit！ ：）