angular 2 undefined 获取外部订阅

Question

大家晚上好

我在从我通过订阅订阅的服务中检索数据时遇到问题；我在订阅函数内部获取数据，但在外部它是未定义的；

这是代码。

userservice.ts

import { Injectable } from "@angular/core";
import { Http, Response, Headers } from "@angular/http";
import 'rxjs/Rx';
import { Observable } from "rxjs";

@Injectable()
export class UserService{
  constructor(private http: Http){

  }

getRegistrations(): Observable<any> {
    return this.http.get('http://127.0.0.1:8000/api/candidatesL')
      .map(
        (response: Response) => {
          return response.json().candidates;
        }
      );
  }

  }

全部-registration.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from "@angular/forms";
import { Candidate } from "../candidate.interface";
import { Response } from "@angular/http";
import { UserService } from "../user.service";

@Component({
  selector: 'app-all-registration',
  templateUrl: './all-registration.component.html',
  styleUrls: ['./all-registration.component.css']
})
export class AllRegistrationComponent implements OnInit {

  candidates: Candidate[];

  constructor(private userService: UserService) {}

  ngOnInit() {

                this.getRegistration()
                console.log(this.candidates);
             }


    getRegistration(){
    this.userService.getRegistrations()
      .subscribe(
                  (candidates: Candidate[]) => this.candidates = candidates,
                  (error: Response) =>  console.log(error),
                )
  }

    }

当我在 .subscribe( ... ) 内部时，我可以显示数据，但在外部我得到 UNDEFINED。

敬请期待您的回答...

Answer 1

由于它是异步调用，您不会在调用 ngOnInit() 后立即获得结果。将控制台语句放入您的订阅调用中，然后您将看到候选人

    getRegistration(){
        this.userService.getRegistrations()
          .subscribe(
                      (candidates: Candidate[]) => {
            this.candidates = candidates
            console.log(this.candidates);
             },
                      (error: Response) =>  console.log(error),
                    )
      }

更新您已经在 class 上将候选人定义为属性，因此您可以在 html 中显示其值，例如：

<div>{{candidates}}<div>

或者如果它是 json

<div *ngIf="candidates">{{candidates | json}}<div>

只要你在订阅中赋值，它就会显示任何值。如果您只想在它有值时（订阅完成后）检查显示该值，您总是可以放置一个 *ngIf 指令来检查 html 元素上的值。

Answer 2

您的代码运行良好，这是 Observable 类型变量的正常行为。

ngOnInit() {

  this.getRegistration()  // this will set the value of this.candidates in future as its async.
  console.log(this.candidates); // this line will executed immediately before the observable returns a value.
}

所以你的 console.log 给你未定义。处理 observables 中的值总是好的建议。

ngOnInit() {

  this.userService.getRegistrations().subscribe((candidates: Candidate[]) => {
      this.candidates = candidates;
      console.log(this.candidates);
    },
        (error: Response) =>  console.log(error)
    );
}

由于您的服务正在返回一个可观察对象，因此只能从中提取一个值来订阅它。请记住它不是直接变量而是 observable<any> 变量。

angular 2 undefined 获取外部订阅

angular 2 undefined obtain outside subcribe

undefined

subscribe

angular