ERROR TypeError: Kann die Eigenschaft 'setupScene' von undefined in Angular nicht lesen 4

Question

So rufen Sie die Angular-Klassenfunktion innerhalb der Load-Funktion im Typskript auf. So rufen Sie Methode in load-Methode in Typskript in angular-cli.Angular-CLI zurück Fehler undefinierte Funktion.

import { Component, OnInit ,ElementRef, ViewChild} from '@angular/core'; 
import {ProjectService} from '../service/project.service'; 
import {ComponentService} from '../service/component.service'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { Validations } from '../app.validations'; 
import {Observable} from 'rxjs/Observable'; 
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; 
import { Configuration } from '../app.constants'; 
import { UtilityService } from '../shared/utility.service'; 
import * as THREE from 'three'; 


@Component({ 
    selector: 'app-configuration', 
    templateUrl: './configuration.component.html', 
    styleUrls: ['./configuration.component.css'] 
}) 
export class ConfigurationComponent implements OnInit { 
    /* Three Js configuration */ 

    @ViewChild('container') elementRef: ElementRef; 
    private container : HTMLElement; 
    private scene: THREE.Scene; 
    private camera: THREE.PerspectiveCamera; 
    private renderer: THREE.WebGLRenderer; 
    private cube : THREE.Mesh; 
    objNew : any; 
    /* End */ 
    configuration:any =[]; 
    component_id : string; 
    project_id :string; 
    constructor(public Configuration: Configuration, private project:ProjectService,private route: ActivatedRoute, 
       private router: Router, private validations : Validations,private formBuilder: FormBuilder, 
       private component:ComponentService, 
       private _utility : UtilityService) { 

    console.log(THREE); 
    } 
    /** 
    * @methodOf initialization 
    * @method : get params 
    * @param : component_id 
    * */ 
    ngOnInit() { 
    this.component_id = this.route.snapshot.params["id"]; 
    this.project_id = localStorage.getItem('project_id'); 
    this.container = this.elementRef.nativeElement; 
    console.log('manish'); 
    this.init(); 


    this._utility.showLoading(true); 
    this.component.getConfiguration().subscribe(data => this.success(data,'componentconfiguration'), 
     error => this.HandleError(error,'componentconfiguration') 
    ); 
    } 

    success(response,type) { 
    if(response.status_code == 200){ 
     this._utility.showLoading(false); 
     this.configuration = response; 

    } else if(response.status_code == 201){ 
     this.router.navigate(['configuration/'+this.component_id ]); 
    } else{ 
     alert('Something went wrong'); 
    } 
    } 
    HandleError(error,type){ 
    alert('Something went wrong.'); 
    this.router.navigate(['dashboard']); 

    } 

    /* init function for 3js*/ 
    init(){ 
    let screen = { 
     width : 350, 
     height : 400 
     }, 
     view = { 
     angle : 45, 
     aspect : screen.width/screen.height, 
     near : 0.1, 
     far : 1000 
     }; 

    this.scene = new THREE.Scene(); 
    this.camera = new THREE.PerspectiveCamera(view.angle, view.aspect, view. near, view.far); 
    this.renderer = new THREE.WebGLRenderer(); 

    this.renderer.setSize(screen.width, screen.height); 
    this.container.appendChild(this.renderer.domElement); 
    var loader = new THREE.ObjectLoader(); 
    // TODO : input yout exported json file 
    var url = './assets/json/scene.json'; 
    loader.load(url, function(obj) { 
     this.setupScene(obj); 
    }); 

    this.render(); 
    } 
    render(){ 
    let self: ConfigurationComponent = this; 
    (function render(){ 
     requestAnimationFrame(render); 
     self.renderer.render(self.scene, self.camera); 
     self.animate(); 
    }()); 
    } 

    animate(){ 
    if(this.scene && this.camera) { 
     this.renderer.render(this.scene, this.camera); 
     this.camera.lookAt(this.scene.position); 
     //this.objNew.autoRotate = true; 
     // hideShow(objNew,objNew.children[0],showHide); 
     //this.rotateAroundWorldAxis(this.objNew); 
    } 
    (function animate(){ 
    requestAnimationFrame(animate); 
    }()); 

    } 

    setupScene(result) { 
    var scene = result; 
    this.objNew = scene.children[2]; 
    console.log(this.objNew) 
    // find main camera by tag 
    this.camera = this.findByUserData(scene, "tag", "MainCamera"); 
    // calculate aspect. use window size. 
    var winsize = this.renderer.getSize(); 
    this.camera.aspect = window.innerWidth/ window.innerHeight; 
    this.camera.updateProjectionMatrix(); 

    } 
    /* find data */ 
    findByUserData(node, key, value) { 
    if(node.userData && node.userData[key] == value) { 
     return node; 
    } 
    for(var i = 0 ; i < node.children.length ; i++) { 
     var child = node.children[i]; 
     var found = this.findByUserData(child, key, value); 
     if(found != null) { 
     return found; 
     } 
    } 
    return undefined; 
    } 

    rotateAroundWorldAxis(obj) { 
    obj.rotation.x = obj.rotation.x; 
    obj.rotation.y = 0.01 + obj.rotation.y; 
    obj.rotation.z = obj.rotation.z; 
    } 
} 

Fehler beim Abrufen:

ERROR TypeError: Cannot read property 'setupScene' of undefined.

Bitte empfehlen Sie mir, wie innerhalb von Angular-cli drei js Objekt loader laufen. Wie löst man das?

Answer 1

dies bezieht sich auf die init-Funktion, die nicht die Funktion haben setupScene, sollten Sie Pfeil-Funktion verwenden,

loader.load(url, obj => { 
    this.setupScene(obj); 
}); 

Answer 2

Pfeilfunktion zu erhalten Kontext (this Stichwort):

loader.load(url, obj => { 
    this.setupScene(obj); 
});