संपत्ति अपरिभाषित कोणीय 2 और टाइपस्क्रिप्ट

Question

मैं कोणीय 2 मॉड्यूल एचटीपी के उपयोग के माध्यम से स्थानीय जेसन फ़ाइल की सामग्री को पुनर्प्राप्त करने का प्रयास कर रहा हूं।

मुझे जो त्रुटि मिल रही है वह एक अनिर्धारित संपत्ति है, लेकिन मुझे लगता है कि इसे तैयार किया जाना चाहिए था जब तैयार करने योग्य कार्य समारोह को पर्यवेक्षक/सदस्यता द्वारा पूर्ण किया जाता है। के रूप में यह सब अपेक्षाकृत नई है

यहाँ त्रुटि,

TypeError: Cannot read property 'clientId' of undefined 
    at SpotifyComponent.prepareCredentials (spotify.component.ts:58) 
    at SafeSubscriber.eval [as _complete] (spotify.component.ts:38) 
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:240) 
    at SafeSubscriber.complete (Subscriber.ts:226) 
    at Subscriber._complete (Subscriber.ts:142) 
    at Subscriber.complete (Subscriber.ts:120) 
    at MapSubscriber.Subscriber._complete (Subscriber.ts:142) 
    at MapSubscriber.Subscriber.complete (Subscriber.ts:120) 
    at XMLHttpRequest.onLoad (xhr_backend.ts:67) 
    at ZoneDelegate.invokeTask (zone.js:356) 

घटक,

import { Component, OnInit } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

import { SpotifyService } from './spotify.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-spotify', 
    templateUrl: 'spotify.component.html', 
    styleUrls: ['spotify.component.css'], 
    providers: [SpotifyService] 
}) 

export class SpotifyComponent implements OnInit { 
    private credentialsData: { 
    clientId: string, 
    clientSecret: string 
    }; 

    constructor(
    private http: Http, 
    private spotifyService: SpotifyService 
) { } 

    ngOnInit() { 
    if (this.spotifyService) { 
     this.http.get('../app/data/credentials.json') 
     .map(this.handleResponse) 
     .subscribe(
      this.setupCredentials, 
      this.handleError, 
     () => { this.prepareCredentials(); } 
     ); 
    } 
    } 

    private setupCredentials(subData) { 
    console.log('Setting up credentials...'); 
    this.credentialsData = { 
     clientId: <string>subData.clientId, 
     clientSecret: <string>subData.clientSecret 
    }; 
    console.log('credentials: ' + 
     JSON.stringify(this.credentialsData)); 
    console.log('credentials clientId: ' + this.credentialsData.clientId); 
    console.log('credentials clientSecret: ' + this.credentialsData.clientSecret); 
    } 

    private prepareCredentials() { 
    console.log('Preparing credentials...'); 
    this.spotifyService.prepare(
     this.credentialsData.clientId, 
     this.credentialsData.clientSecret, 
     '', 'http://localhost:4200/spotify'); 

    } 

    private handleResponse(res: Response) { 
    console.log(JSON.stringify(res.json())); 
    return res.json().spotify; 
    } 

    private handleError(error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server  error'; 
    console.error(errMsg); // log to console instead 
    return Observable.throw(errMsg); 
    } 

} 

और सेवा, किसी भी मदद के लिए अग्रिम में

import { Injectable } from '@angular/core'; 

@Injectable() 
export class SpotifyService { 
    private clientId: string; 
    private clientSecret: string; 
    private scopes: string; 
    private callbackUrl: string; 

    constructor() { } 

    wakeUpTest(): string { 
    console.log('SpotifyService is awake and initiated.'); 
    return 'SpotifyService is awake and initiated.'; 
    } 

    prepare(clientId: string, 
    clientSecret: string, 
    scopes: string, 
    callbackUrl: string): void { 
     console.log(clientId); 
    } 

    getAuthCode(): void { 
    let authUrl: string = 'https://accounts.spotify.com/authorize' + 
     '?response_type=code' + 
     '&client_id=' + this.clientId + 
     '&scope=' + encodeURIComponent(this.scopes) + 
     '&redirect_uri=' + encodeURIComponent(this.callbackUrl); 
    } 

} 

धन्यवाद या संकेत इस प्रकार है मेरे लिए।

Answer 1

मुझे लगता है कि आपकी समस्या को यहाँ स्थित है:

this.http.get('../app/data/credentials.json') 
    .map(this.handleResponse) 
    .subscribe(
    this.setupCredentials, <== 
    this.handleError, 
    () => { this.prepareCredentials(); } 
); 

डिफ़ॉल्ट जे एस/टीएस व्यवहार है कि यदि आप एक विधि संदर्भ सीधे गुजरती हैं। आप this बनाए रखने के लिए this.setupCredentials.bind(this) तरह बाँध का उपयोग कर सकते हैं या उसका उपयोग arrow function:

this.http.get('../app/data/credentials.json') 
    .map(this.handleResponse) 
    .subscribe(
     (data) => this.setupCredentials(data), 
     (res) => this.handleError(res), 
    () => { this.prepareCredentials(); } 
    ); 

आशा है कि यह आप में मदद करता है!