Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了属性未定义Angular2和TypeScript大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试通过使用Angular2模块http检索本地json文件内容.

我得到的@L_616_2@是一个未定义的@L_607_4@,但我认为它应该在Observable / Subscribe调用onComplete的prepareCredentials函数时初始化.

以下是@L_616_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);
  }

}

提前感谢任何帮助或指示,因为这对我来说相对较新.

解决方法

我想你的问题就在这里

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

如果直接传递方法引用,这是认的JS / TS行为.你可以使用像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(); }
   );

希望它能帮到你!

大佬总结

以上是大佬教程为你收集整理的属性未定义Angular2和TypeScript全部内容,希望文章能够帮你解决属性未定义Angular2和TypeScript所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。