[英]Angular 2 and LeafLet Uncaught ReferenceError: <function> is not defined at HTMLButtonElement.onclick
I have a project in Angular 2 with Leaflet, I would like to call the simple function by clicking the button, but I get我在 Angular 2 中有一个带有 Leaflet 的项目,我想通过单击按钮来调用简单的函数,但是我得到了
ReferenceError: <function> is not defined at HTMLButtonElement.onclick
Here is my code.这是我的代码。 Everything works, but the function not.
一切正常,但功能不行。
export class MapComponent implements OnInit {
//layer
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 30,
subdomains:['mt0','mt1','mt2','mt3']
});
//!!!The FUNCTION
test() {
console.log('test');
}
constructor () {}
ngOnInit() {
this.ParseService.getJ().subscribe(data => {
this.myData = JSON.parse(data);
//set markers and popUps
for(let i = 0; i < this.myData.length; i++) {
let lat =+((this.myData[i])['lat']);
let lng =+((this.myData[i])['lng']);
this.id = (this.myData[i])['code'];
//HERE IS THE PROBLEM. BUTTON APPEARS BUT FUNCTION IS NOT AVAILABLE
let popUp = (this.myData[i])['displayName'] +
'<br/><button onclick="test">Raumplan</button>';
let markerLocation = L.latLng(lat, lng);
let marker = new L.Marker(markerLocation, {icon: customIcon});
map.addLayer(marker);
marker.bindPopup(popUp);
}
});
Could you please help me with workaround?你能帮我解决方法吗?
Do not use onclick
as it's an HTML
and the function you assign to onclick
will be searched in global scope
of javascript
ie inside <script>
tags and this is no more the part of Angular2
.不要使用
onclick
因为它是一个HTML
并且您分配给onclick
的函数将在javascript
全局scope
搜索,即在<script>
标签内,这不再是Angular2
的一部分。 So what you should try is something like below所以你应该尝试像下面这样
import {Component} from '@angular/core';
@Component({
selector: 'dynamic-button',
template: '<button type="button" (click)="test()">Raumplan</button>'
})
export class DynamicButton{
public test(): void{
alert("Hi. I am a test call");
}
}
And then接着
let popUp = (this.myData[i])['displayName'] +
'<br/><dynamic-button></dynamic-button>';
in angular2 you will bind the event like this:在 angular2 中,您将像这样绑定事件:
let popUp = (this.myData[i])['displayName'] +
'<br/><button (click)="test">Raumplan</button>';
OR this:或者这个:
let popUp = (this.myData[i])['displayName'] +
'<br/><button on-click="test">Raumplan</button>';
You can try using (click)="OpenList()"
您可以尝试使用
(click)="OpenList()"
<button (click)="OpenList()" type="button" class="btn-link btn-anchor">List</button>
Typescript
function Typescript
功能
OpenList()
{
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.