【问题标题】:Change event via radio button ionic 4通过单选按钮 ionic 4 更改事件
【发布时间】:2020-01-27 09:34:22
【问题描述】:

我目前正在开发一个带有传单的 ionic 4 和 angular 项目,用于在地图上显示天气预报。我想在无线电组中的(ionChange) 事件上获取选定的单选按钮值,以更改地图上的天气,如风、雨等。

问题是当我点击任何收音机时,事件并没有改变,我在地图上得到了过多的数据。我想做的是当用户单击任何选项时删除所有标记并显示其他标记。

短代码

      async getData(event) {
        console.log(event);

      if (event.detail.value="weather") {

      this.http.get("xxxxxxxx)
        .subscribe(data => {
          let f = data["vt1observation"]

            new L.Marker([this.cities.duhok.lat, this.cities.duhok.lng], {
              icon: new L.DivIcon({
                className: 'my-div-icon',
                html: `<div style="width: 45px";>
            <img src="assets/icon/${f.icon}.png"/ style="width:20px;">
            <span style="color:white">${f.temperature}C</span></div>`
              })
            }).addTo(this.map);

        })

        }  else if (event.detail.value="wind") {

      this.http.get("xxxxxxxx)
        .subscribe(data => {
          let f = data["vt1observation"]

            new L.Marker([this.cities.duhok.lat, this.cities.duhok.lng], {
              icon: new L.DivIcon({
                className: 'my-div-icon',
                html: `<div style="width: 45px";>
            <img src="assets/icon/${f.icon}.png"/ style="width:20px;">
            <span style="color:white">${f.wind}</span></div>`
              })
            }).addTo(this.map);

        })

}

console.log(事件);

HTML

<ion-list>
        <ion-radio-group (ionSelect)="getData($event)" [(ngModel)]="datails">

          <ion-item>
            <ion-label>forecast</ion-label>
            <ion-radio slot="start" value="weather" checked></ion-radio>
          </ion-item>
          <ion-item>
            <ion-label>wind</ion-label>
            <ion-radio slot="start" value="wind" ></ion-radio>
          </ion-item>

          <ion-item>
            <ion-label>humd</ion-label>
            <ion-radio slot="start" value="h"></ion-radio>
          </ion-item>

          <ion-item>
            <ion-label>rain</ion-label>
            <ion-radio slot="start" value="rain"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>

【问题讨论】:

  • 你能把这个console.log(event);log 添加到问题中吗..
  • 我加了你可以查看
  • 您能否检查您的 IF 条件是否正确 (event.detail.value="weather") 而不是 (event.detail.value==='weather')?
  • @PALLAMOLLASAI,他的值现在变了,但是我的数据混合太多了!! .它应该删除以前的数据然后显示新数据
  • 在哪一行你得到cannor read property 'value' of null...(在 event.detail.value ???? )意味着我们将 event 或 detail 设为 null ... ..

标签: angular leaflet ionic4 radio-group


【解决方案1】:

这就是问题所在

 if (event.detail.value="weather") {

应该是

 if (event.detail.value === "weather") {

您正在将值分配给event.detail.value,但您需要与它进行比较。

我希望这能解决问题.. :)

【讨论】:

  • 现在他的值变了,但是我的数据混合太多了!! .它应该删除以前的数据然后显示新数据
  • this.http.get("xxxxxxxx),检查这里你发送到服务器的数据是什么......也许这就是导致问题的原因,,,
  • 但是当我在改变值时得到混合数据?
  • 你正在使用相同的城市来显示这条线的数据,[this.cities.duhok.lat, this.cities.duhok.lng]..
  • 好的,但是现在当我运行应用程序时,我得到了空地图并且错误显示Error: Uncaught (in promise): TypeError: Cannot read property 'value' of null TypeError: Cannot read property 'value' of null
猜你喜欢
  • 1970-01-01
  • 2014-12-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-03-21
  • 2016-06-24
  • 2016-07-26
相关资源
最近更新 更多