Ion-toggle doesn't work

Ionic Framework Ionic Angular
1

Hi everyone, I have a problem with a toggle, I would like to have 2 states for 2 different functions, but I always get the error: “TypeError: cab.traverse is not a function”

HTML

<ion-toggle [checked]="true" [(ngModel)]="toggle" (ionChange)="switchfun($event)"></ion-toggle>

TS/JS

  toggle = true;

  switchfun(cab, glbexporter) {
    if (this.toggle) {
      this.fun1(cab, glbexporter);
    }
    else {
      this.fun2(cab, glbexporter);
    }
  }

  fun1(cab, glbexporter) {
    cab.traverse((child) => {
        child.visible = false;
    })
    setTimeout(() => glbexporter(), 1000);
  }

  fun2(cab, glbexporter) {
      cab.traverse((child) => {
        child.visible = true;
    })
    setTimeout(() => glbexporter(), 1000);
  }
2

because there is no traverse method in $event. your cab is representing the event. console.log to see what you get.

3

But traverse is a function

I previously used

    cab.traverse((child) => {
        child.visible = false;
    })

in the code, and it works

4

traverse is a function for three.js library not javascript.

i thinking you need to read on how arguments work in javascript. JavaScript Function Parameters

in your code you are passing in the javascript $event

(ionChange)="switchfun($event)"

then passing that argument to cab:

fun1(cab, glbexporter) {
    cab.traverse((child) => {
        child.visible = false;
    })
  }

so its expecting the ‘cab’ to be based of the $event argument.

5

Understood, is there any way to call any function?

6

What are you trying to achieve?

7

this toggle should turn on and off meshes within a 3D model, obviously to do this I have to pass a function from the three.js library, which is “cab.traverse”

After several trials I now get this error, which confirms what you told me further:
Cannot read properties of undefined (reading ‘traverse’)

Also I believe that the parameters I pass to switchfun (cab, glbexporter) are invalid, because out of the scope of the main function, the one contained in “start{}” to be clear, where the code with those parameters and 3D model handling is contained.

Summary of code structure:


export class pagename{
  start() {
       stuff, here cab (3D model) and the glbexporter function are declared.
  }
  the code we are talking about.
}
8

I would imagine something like this:

switchfun(event) {
    // check to see if checked
    if (event.detail.checked) {
      this.fun1();
    } else {
      this.fun2();
    }
  }

since you stated the cab & glbexplorer are already declared, no need to pass as arguments. And you also don’t need ngModel on the ion-toggle since the value you seek is coming from event.

and then in your fun1 or fun2 method is where you would write the logic to traverse through your object.

fun1() {
    myObj.traverse((child) => {
        child.visible = false;
    })
    setTimeout(() => glbexporter(), 1000);
  }

by the way you never stated where your ‘cab’ object is coming from. It cannot come from the $event be passed. So determine where myObj is coming from and then this will work as expected if that object has a value of visible.

9

The problem is that cab and glbexporter are not found ( ts(2552) )
Because thery’re inside another function, the start function

10

then you need to return those values within those methods. return - JavaScript | MDN

cab() {
  // logic
  return whatever;
}

then get the values of that function:

const cabValue = this.cab();
11

cab is a variable that change dynamically (the project is a 3D Configurator) while glbexporter is a function, how can i return them both and call them outside the main function?

   ***various functions, glbexporter included***
   }
   return {cab, glbexporter}
}

the code we are talking about, which should be able to read cab
and enter the function glbexporter, both inside the constructor.
12

I don’t know how three.js works since I never used. But from looking over the docs, in order to use traverse, it has to be appended to a object to look through.

You need to read over the docs of both three.js and the basics of javascript. You seem to have a knowledge gap.

The ion-toggle component is not your issue, it’s the logic your writing.