我正在用Angular用OpenLayers编程一个地图应用程序，我想在复选框上添加一些事件。我创建了带有两个菜单的mat-button的mat-button。
所有地图组件都在一个app.component.ts文件中，而我带有复选框的菜单是一个app.component.html文件。
app.component.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="header">
<mat-toolbar>OpenLayers</mat-toolbar>
<div class="menu">
<button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
<mat-menu #menu="matMenu">
<input type="checkbox" id="piscine" name="piscine" value="piscine">
<label for="subscribeNews">Piscines</label>
<br>
<input type="checkbox" id="piscine" name="piscine" value="piscine">
<label for="subscribeNews">Parkings</label>
</mat-menu>
</div>
</div>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</body>
</html>
在我的app.component.ts中，我有这段代码来检索复选框状态，但这不起作用（此代码在简单的HTML文件中有效）
app.component.ts：（提取）
$('#piscine').on('change', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
this.map.addControl(this.vectorLayer_Piscine);
this.vectorLayer_Piscine.setStyle(piscine);
this.map.addOverlay(popup);
} else {
this.map.removeControl(this.vectorLayer_Piscine);
this.map.removeOverlay(popup);
}
});
$('#parking').on('change', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
this.map.addControl(this.vectorLayer_Parking);
this.vectorLayer_Parking.setStyle(markers);
this.map.addOverlay(popup);
} else {
this.map.removeControl(this.vectorLayer_Parking);
this.map.removeOverlay(popup);
}
});
通过jQuery的此导入：
import $ from 'jquery';（我使用了npm install jquery）使用此代码，我只想在选中相应复选框时才在地图上显示一些标记。
还有另一种方法来检索复选框状态吗？
最佳答案
首先我可以看到两个
<input type="checkbox" id="piscine" name="piscine" value="piscine">
在您的代码中。请更正（ID和名称相同）。
接下来是不需要value属性。去掉它。
然后做如下
<input type="checkbox" id="piscine" name="piscine" (change)="handleSelected($event)">
在ts文件中
handleSelected($event) {
if ($event.target.checked === true) {
// Handle your code
}
}
希望这个能对您有所帮助！
关于javascript - Angular-在复选框上添加事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50461231/