Mixing
Typescript,TypeError is not a function, Calling another method in the same class
0
I'm currently working on a angular project and I don't understand the error message.
How the error occurs:When triggering the mouseevent (mousedown: simply a mouseclick event) I call the mousedown method, in this method the method addNode is called and the error occurs
Typerror: your function this.addNode() is not a function at HTMLCanvasElement
export class Graph {
private ctx : CanvasRenderingContext2D;
private canvas: HTMLCanvasElement;
private readonly width: number;
private readonly height: number;
nodes: Node = ;
constructor(canvas: HTMLCanvasElement){
this.canvas = canvas;
this.ctx = this.canvas.getContext('2d');
this.width = canvas.width;
this.height = canvas.height;
this.nodes = ;
canvas.addEventListener('mousedown', this.onDown, false);
this.draw1();
}
onDown(e:MouseEvent){
***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
console.log("LOG LOG " + e.offsetX + ", " + e.offsetY);
console.log("My Array: " + this.nodes.length);
}
addNode(x:number,y:number){
this.nodes.push(new Node(x,y));
}
draw1():void{
// console.log("Should be drawing");
//console.log("Node legnth : " + this.nodes.length);
this.nodes.forEach(node => {
console.log("Why you not doing");
this.ctx.fillStyle = "green";
this.ctx.beginPath();
this.ctx.arc(node.x,node.y,25,0,2*Math.PI);
this.ctx.stroke();
this.ctx.fill();
});
window.requestAnimationFrame(()=>this.draw1());
}
}
class Node{
x:number;
y:number;
constructor(x:number,y:number){
this.x = x;
this.y = y;
}
}
I thank you all in advance :)
angular typescript
asked Nov 19 '18 at 17:08
Bertrei Lakan
1
add a comment |
0
I'm currently working on a angular project and I don't understand the error message.
How the error occurs:When triggering the mouseevent (mousedown: simply a mouseclick event) I call the mousedown method, in this method the method addNode is called and the error occurs
Typerror: your function this.addNode() is not a function at HTMLCanvasElement
export class Graph {
private ctx : CanvasRenderingContext2D;
private canvas: HTMLCanvasElement;
private readonly width: number;
private readonly height: number;
nodes: Node = ;
constructor(canvas: HTMLCanvasElement){
this.canvas = canvas;
this.ctx = this.canvas.getContext('2d');
this.width = canvas.width;
this.height = canvas.height;
this.nodes = ;
canvas.addEventListener('mousedown', this.onDown, false);
this.draw1();
}
onDown(e:MouseEvent){
***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
console.log("LOG LOG " + e.offsetX + ", " + e.offsetY);
console.log("My Array: " + this.nodes.length);
}
addNode(x:number,y:number){
this.nodes.push(new Node(x,y));
}
draw1():void{
// console.log("Should be drawing");
//console.log("Node legnth : " + this.nodes.length);
this.nodes.forEach(node => {
console.log("Why you not doing");
this.ctx.fillStyle = "green";
this.ctx.beginPath();
this.ctx.arc(node.x,node.y,25,0,2*Math.PI);
this.ctx.stroke();
this.ctx.fill();
});
window.requestAnimationFrame(()=>this.draw1());
}
}
class Node{
x:number;
y:number;
constructor(x:number,y:number){
this.x = x;
this.y = y;
}
}
I thank you all in advance :)
angular typescript
asked Nov 19 '18 at 17:08
Bertrei Lakan
1
Correction: As event method I meant the onDown() method and not mouseDown
– Bertrei Lakan
Nov 19 '18 at 17:10
1
Possible duplicate of TypeScript, how to keep class methods event handlers context to "this" instance
– Alexander Staroselsky
Nov 19 '18 at 17:22
add a comment |
0
0
0
I'm currently working on a angular project and I don't understand the error message.
How the error occurs:When triggering the mouseevent (mousedown: simply a mouseclick event) I call the mousedown method, in this method the method addNode is called and the error occurs
Typerror: your function this.addNode() is not a function at HTMLCanvasElement
export class Graph {
private ctx : CanvasRenderingContext2D;
private canvas: HTMLCanvasElement;
private readonly width: number;
private readonly height: number;
nodes: Node = ;
constructor(canvas: HTMLCanvasElement){
this.canvas = canvas;
this.ctx = this.canvas.getContext('2d');
this.width = canvas.width;
this.height = canvas.height;
this.nodes = ;
canvas.addEventListener('mousedown', this.onDown, false);
this.draw1();
}
onDown(e:MouseEvent){
***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
console.log("LOG LOG " + e.offsetX + ", " + e.offsetY);
console.log("My Array: " + this.nodes.length);
}
addNode(x:number,y:number){
this.nodes.push(new Node(x,y));
}
draw1():void{
// console.log("Should be drawing");
//console.log("Node legnth : " + this.nodes.length);
this.nodes.forEach(node => {
console.log("Why you not doing");
this.ctx.fillStyle = "green";
this.ctx.beginPath();
this.ctx.arc(node.x,node.y,25,0,2*Math.PI);
this.ctx.stroke();
this.ctx.fill();
});
window.requestAnimationFrame(()=>this.draw1());
}
}
class Node{
x:number;
y:number;
constructor(x:number,y:number){
this.x = x;
this.y = y;
}
}
I thank you all in advance :)
angular typescript
asked Nov 19 '18 at 17:08
Bertrei Lakan
1
I'm currently working on a angular project and I don't understand the error message.
How the error occurs:When triggering the mouseevent (mousedown: simply a mouseclick event) I call the mousedown method, in this method the method addNode is called and the error occurs
Typerror: your function this.addNode() is not a function at HTMLCanvasElement
export class Graph {
private ctx : CanvasRenderingContext2D;
private canvas: HTMLCanvasElement;
private readonly width: number;
private readonly height: number;
nodes: Node = ;
constructor(canvas: HTMLCanvasElement){
this.canvas = canvas;
this.ctx = this.canvas.getContext('2d');
this.width = canvas.width;
this.height = canvas.height;
this.nodes = ;
canvas.addEventListener('mousedown', this.onDown, false);
this.draw1();
}
onDown(e:MouseEvent){
***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
console.log("LOG LOG " + e.offsetX + ", " + e.offsetY);
console.log("My Array: " + this.nodes.length);
}
addNode(x:number,y:number){
this.nodes.push(new Node(x,y));
}
draw1():void{
// console.log("Should be drawing");
//console.log("Node legnth : " + this.nodes.length);
this.nodes.forEach(node => {
console.log("Why you not doing");
this.ctx.fillStyle = "green";
this.ctx.beginPath();
this.ctx.arc(node.x,node.y,25,0,2*Math.PI);
this.ctx.stroke();
this.ctx.fill();
});
window.requestAnimationFrame(()=>this.draw1());
}
}
class Node{
x:number;
y:number;
constructor(x:number,y:number){
this.x = x;
this.y = y;
}
}
I thank you all in advance :)
angular typescript
angular typescript
asked Nov 19 '18 at 17:08
Bertrei Lakan
1
asked Nov 19 '18 at 17:08
Bertrei Lakan
1
asked Nov 19 '18 at 17:08
Bertrei Lakan
1
asked Nov 19 '18 at 17:08
Bertrei Lakan
1
asked Nov 19 '18 at 17:08
Bertrei Lakan
1
1
Correction: As event method I meant the onDown() method and not mouseDown
– Bertrei Lakan
Nov 19 '18 at 17:10
1
Possible duplicate of TypeScript, how to keep class methods event handlers context to "this" instance
– Alexander Staroselsky
Nov 19 '18 at 17:22
add a comment |
Correction: As event method I meant the onDown() method and not mouseDown
– Bertrei Lakan
Nov 19 '18 at 17:10
1
Possible duplicate of TypeScript, how to keep class methods event handlers context to "this" instance
– Alexander Staroselsky
Nov 19 '18 at 17:22
Correction: As event method I meant the onDown() method and not mouseDown
– Bertrei Lakan
Nov 19 '18 at 17:10
Correction: As event method I meant the onDown() method and not mouseDown
– Bertrei Lakan
Nov 19 '18 at 17:10
1
1
Possible duplicate of TypeScript, how to keep class methods event handlers context to "this" instance
– Alexander Staroselsky
Nov 19 '18 at 17:22
Possible duplicate of TypeScript, how to keep class methods event handlers context to "this" instance
– Alexander Staroselsky
Nov 19 '18 at 17:22
add a comment |
2 Answers
2
active
oldest
votes
0
Try using an arrow function for method onDown() to preserve the context of this to the class Graph:
onDown = (e: MouseEvent) => {
***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
console.log("LOG LOG " + e.offsetX + ", " + e.offsetY);
console.log("My Array: " + this.nodes.length);
}
Alternatively, if the actual <canvas> element exists in your template, you can use (mousedown) instead of manually adding the event handler in the constructor().
Hopefully that helps!
answered Nov 19 '18 at 17:18
Alexander Staroselsky
11.8k41739
add a comment |
0
try like this
canvas.addEventListener('mousedown', (e) => this.onDown(e), false);
answered Nov 19 '18 at 17:21
Sheik Althaf
26717
2
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 20 '18 at 2:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379546%2ftypescript-typeerror-is-not-a-function-calling-another-method-in-the-same-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try using an arrow function for method onDown() to preserve the context of this to the class Graph:
onDown = (e: MouseEvent) => {
***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
console.log("LOG LOG " + e.offsetX + ", " + e.offsetY);
console.log("My Array: " + this.nodes.length);
}
Alternatively, if the actual <canvas> element exists in your template, you can use (mousedown) instead of manually adding the event handler in the constructor().
Hopefully that helps!
answered Nov 19 '18 at 17:18
Alexander Staroselsky
11.8k41739
add a comment |
0
Try using an arrow function for method onDown() to preserve the context of this to the class Graph:
onDown = (e: MouseEvent) => {
***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
console.log("LOG LOG " + e.offsetX + ", " + e.offsetY);
console.log("My Array: " + this.nodes.length);
}
Alternatively, if the actual <canvas> element exists in your template, you can use (mousedown) instead of manually adding the event handler in the constructor().
Hopefully that helps!
answered Nov 19 '18 at 17:18
Alexander Staroselsky
11.8k41739
add a comment |
0
0
0
Try using an arrow function for method onDown() to preserve the context of this to the class Graph:
onDown = (e: MouseEvent) => {
***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
console.log("LOG LOG " + e.offsetX + ", " + e.offsetY);
console.log("My Array: " + this.nodes.length);
}
Alternatively, if the actual <canvas> element exists in your template, you can use (mousedown) instead of manually adding the event handler in the constructor().
Hopefully that helps!
answered Nov 19 '18 at 17:18
Alexander Staroselsky
11.8k41739
Try using an arrow function for method onDown() to preserve the context of this to the class Graph:
onDown = (e: MouseEvent) => {
***this.addNode(e.offsetX,e.offsetY);*** //This Line causes the error
console.log("LOG LOG " + e.offsetX + ", " + e.offsetY);
console.log("My Array: " + this.nodes.length);
}
Alternatively, if the actual <canvas> element exists in your template, you can use (mousedown) instead of manually adding the event handler in the constructor().
Hopefully that helps!
answered Nov 19 '18 at 17:18
Alexander Staroselsky
11.8k41739
answered Nov 19 '18 at 17:18
Alexander Staroselsky
11.8k41739
answered Nov 19 '18 at 17:18
Alexander Staroselsky
11.8k41739
answered Nov 19 '18 at 17:18
Alexander Staroselsky
11.8k41739
11.8k41739
add a comment |
add a comment |
0
try like this
canvas.addEventListener('mousedown', (e) => this.onDown(e), false);
answered Nov 19 '18 at 17:21
Sheik Althaf
26717
2
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 20 '18 at 2:00
add a comment |
0
try like this
canvas.addEventListener('mousedown', (e) => this.onDown(e), false);
answered Nov 19 '18 at 17:21
Sheik Althaf
26717
2
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 20 '18 at 2:00
add a comment |
0
0
0
try like this
canvas.addEventListener('mousedown', (e) => this.onDown(e), false);
answered Nov 19 '18 at 17:21
Sheik Althaf
26717
try like this
canvas.addEventListener('mousedown', (e) => this.onDown(e), false);
answered Nov 19 '18 at 17:21
Sheik Althaf
26717
answered Nov 19 '18 at 17:21
Sheik Althaf
26717
answered Nov 19 '18 at 17:21
Sheik Althaf
26717
answered Nov 19 '18 at 17:21
Sheik Althaf
26717
26717
2
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 20 '18 at 2:00
add a comment |
2
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 20 '18 at 2:00
2
2
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 20 '18 at 2:00
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 20 '18 at 2:00
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379546%2ftypescript-typeerror-is-not-a-function-calling-another-method-in-the-same-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Correction: As event method I meant the onDown() method and not mouseDown
– Bertrei Lakan
Nov 19 '18 at 17:10
1
Possible duplicate of TypeScript, how to keep class methods event handlers context to "this" instance
– Alexander Staroselsky
Nov 19 '18 at 17:22