Ответ на подписку на Angular

Хорошо, я новичок в Angular, поэтому у меня возникла небольшая проблема. Итак, я следую руководству по Angular (https://angular.io/guide/http). Моя проблема в том, что мой http-ответ всегда не определен. В средствах отладки ответ такой:

{"code":0,"status":"error","message":"Invalid JWT - Authentication failed!"}

так, как это должно быть. Но когда я консоль-логирую ответ, он всегда говорит

This should be the response???:  undefined

profile.component.ts

import { Component, OnInit } from '@angular/core';
import { parse } from 'path';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { getLocaleTimeFormat } from '@angular/common';
import { UserService } from '../user.service';
import { Config } from '../config';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})

export class ProfileComponent implements OnInit {

  tmp: any;
  token: any;
  tmp2: any;
  config: Config;
  constructor(private userService: UserService, private router: Router,
    private http: HttpClient) { }

  ngOnInit() {


    this.token = localStorage.getItem('token');
    this.tmp = this.userService.checkToken(this.token)
      .subscribe((data: Config) => this.config = {
        code: data['code'],
        message: data['message']
      });

    console.log("This should be the response???: ", this.config);
  }

}

и user.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Response } from "@angular/http";
import { Observable } from "rxjs";
import 'rxjs/add/operator/map';
import { httpFactory } from '@angular/http/src/http_module';
import { Config } from './config';

@Injectable({
  providedIn: 'root'
})
export class UserService {


  config: Config;
  items: any;
  readonly url = 'http://localhost:82/phpangular/userSystem/src/api/userCtrl.php';


  constructor(private http: HttpClient, private router: Router) { }

  checkToken(token) {
   return this.http.post<Config>
   (this.url, {'data': 'checkToken', 'token': token});
  }


}

и мой интерфейс config.ts

export interface Config {

    code: string;
    message: string;
}

Если бы кто-нибудь дал мне указку, я был бы очень рад :)

Ваше здоровье

  • Нико

angular response subscribe
person user7190476    schedule 08.07.2018    source источник
comment
Это снова мы. Вы получаете наблюдаемый ответ, а не сам ответ, потому что HTTP-вызов является асинхронным. После того, как вы вызвали HttpClient и подписались, вы только отправили запрос. Ответ вернется намного позже, и в этот момент будет выполнен обратный вызов, переданный для подписки. Итак, конечно, ответ не определен сразу после того, как вы только что отправили запрос. Поместите свой console.log () внутрь обратного вызова подписки.   -  person JB Nizet    schedule 08.07.2018
comment
Возможный дубликат данных Angular HttpClient, не определенных вне подписки   -  person JB Nizet    schedule 08.07.2018

Ответы (1)


arrow_upward
3
arrow_downward

Ваш console.log должен быть внутри subscribe обратного вызова

this.tmp = this.userService.checkToken(this.token).subscribe(
  data => {
    this.config = <Config>(data);
    console.log("This should be the response???: ", this.config);
  },
  err => {

  });
person ElasticCode    schedule 08.07.2018
comment
Да, сделал это. Пытался предупредить this.config, но он не определен. Итак, моя проблема в том, как я могу получить значение ответа, присвоенное this.config? И использовать его вне функции подписки - person user7190476; 08.07.2018
comment
Может быть, но все же проблема в том, как я могу использовать эти данные вне подписки? Потому что this.config все еще не определен снаружи. РЕДАКТИРОВАТЬ. Он заработал, он отображается на экране и может быть запущен кнопкой с правильным выходом :). Спасибо! - person user7190476; 08.07.2018
comment
Вы можете вызвать его после того, как ngOnInit() будет готов. В любом другом действии, например, при нажатии кнопки. - person ElasticCode; 08.07.2018
comment
Да, теперь я вроде как понимаю, как это происходит :). Спасибо! - person user7190476; 08.07.2018