Попытка получить данные из сервиса в component.ts - PullRequest
Новая
       22

Попытка получить данные из сервиса в component.ts

0 голосов
/ 04 мая 2019

Я пытаюсь просто получить данные из сервиса и поместить их в мой файл component.ts. У меня есть служба подписки на http get, и она возвращает данные, но после того, как я пытаюсь получить данные в компоненте. Я просто не знаю, как это сделать, не пытаясь получить данные до тех пор, пока он не выполнит вызов в службе.

Я не уверен, что просто делаю трубу неправильно или мне следует подписаться. Ничто из того, что я посмотрел, не помогает.

В консоли я получаю ошибку канала, а затем после ошибки выводит наблюдаемое из сервиса.

My SearchService.ts 

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Row } from "../../app/row";
import { Observable } from "rxjs";
import { of } from "rxjs";

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

  players: Observable<Row[]>;

  constructor(private http: HttpClient) { }

  getPlayers(searchTerm: String): Observable<Row[]>{
    let ROOT_URL =
    "http://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code='mlb'&active_sw='Y'&name_part='" +
   searchTerm +
    "%25'";
    this.http.get<Row[]>(ROOT_URL).subscribe(data => {
      let res = data["search_player_all"];
      let query = res["queryResults"];
      let row = query["row"];
      if (row != null) {
        this.players = row;
        console.log(this.players);
        return this.players;
      }
    });
    return this.players;
  }
}

AppComponent.ts 

import { Component } from "@angular/core";
import { Row } from "../app/row";
import { Observable } from "rxjs";
import { map } from 'rxjs/operators';
import { SearchServiceService } from "../app/services/search-service.service"

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  players: Row[];
  value = "";
  buttonClicked = false;
  numReturned = -1;
  searchTerm = "";
  constructor(private searchService: SearchServiceService) {}

  getData() {
    if (this.value != "") {
      this.searchTerm = this.value;

      this.searchService.getPlayers(this.searchTerm).pipe(map(data => {
        if(data == null) {
          console.log('IS NULL');
        }
        else {
          console.log('in service');
          this.players = data;
          console.log(this.players);
          this.buttonClicked = true;
        }
      }));

      if(this.players == null) {
        console.log('null');
        this.numReturned = -1;
      }

    }
  }

1 Ответ

0 голосов
/ 04 мая 2019

Попробуйте вернуть только http.get так: 

getPlayers(searchTerm: String): Observable<Row[]>{
    return this.http.get<Row[]>(ROOT_URL);
}

Также в вашем коде this.players не является Observable, это простые данные, которые вернул ваш API.

Итак, вместо этого: 

this.searchService.getPlayers(this.searchTerm).pipe(map(

Просто подпишитесь: 

this.searchService.getPlayers(this.searchTerm).subscribe((data: any) => { <process your data here> });
...