【发布时间】: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