Question

我有一个 select 组件，该组件在angle（5）内，具有 ngFor 创建的选项，并且根据所选选项，我在页面上隐藏/显示了一些内容。

为此，我定义了（更改）个选择。

当我更改选定的选项时，一切都会起作用。

但是，即使在首次加载网页后，我也想这样做，而不必单击“选择”并更改所选的选项。

因此，我需要在首次加载页面后进行模拟（更改）。

我该怎么办？

Edit.SelectCurrentWord

*编辑：我可能有几种情况。因此，我希望有一个“自动化”的解决方案，而不是搜索每个选定的组件等。

Answer 1

在<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""> </script> <script src="Scripts/jquery-3.4.1.min.js"></script> <style type="text/css"> #mapid {height: 480px; width: 480px;} </style> </head> <body> <div id="mapid"> </div> <p>Umkreis Km<select id="umkreis"> <option value="--">--</option> <option value="10">10</option> <option value="20">20</option> <option value="50">50</option> </select></p> <script> var latitude = 0; var longitude = 0; // Creating the Map var mymap = L.map('mapid').setView([53.079, 8.801], 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data©<a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1IjoicGVpY2tlciIsImEiOiJjazBveW9pcmQwZWV0M25vMHh4dnRkdmM3In0.JwNOtv10EsQrukcXe-Q2sQ' }).addTo(mymap); function onMapClick(e) { if (circles != undefined) { mymap.removeLayer(circles); } if (document.getElementById("umkreis").value == "--") { alert("nothing"); } else { var fence = document.getElementById("umkreis").value * 100; alert(fence); } latitude = e.latlng.lat; longitude = e.latlng.lng; var circles = L.circle([latitude, longitude], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: fence }).addTo(mymap); //alert("Latitude: " + e.latlng.lat + " Longitude: " + e.latlng.lng); } mymap.on('click', onMapClick); </script> </body> </html>内致电onClick()

Answer 2

执行此操作的Angular方法是将two-way binding与您的选择一起使用。

组件：

@Component({...})
export class AppComponent {
  options = [
    {key: "one", value: "First option"},
    {key: "two", value: "Second option"},
    {key: "three", value: "Third option"}
  ];

  selectedOption = "one";
}

模板：

<select [(ngModel)]="selectedOption">
  <option *ngFor="let opt of options" value="{{opt.key}}">{{ opt.value }}</option>
</select>
<p *ngIf="selectedOption === 'one'">First option selected</p>
etc.

然后，您只需从组件代码中为selectedOption分配一个新值，其模板就会相应更新。

查看以下快速示例： https://stackblitz.com/edit/angular-xxhbgp

第一次渲染后如何模拟选择onchange

2 个答案: