Question

我试图从服务中获取数据并将其放入我的component.ts文件中。我有服务订阅http get，它返回数据，但是在我尝试获取组件中的数据之后。我只是不知道如何处理，直到在服务中完成调用后才尝试获取数据。

我不确定我是在做错管道还是应该订阅。我所查找的内容无济于事。

在控制台中，我得到管道错误，然后在错误发生后，它从服务中输出可观察到的结果。

我的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;
      }

    }
  }

Answer 1

尝试像这样只返回http.get：

TypeError: Cannot read property 'createGain' of null
   at new createGain (node_modules/tone/build/webpack:/Tone/Tone/core/Gain.js:23:1)
   at new t.Volume (node_modules/tone/build/webpack:/Tone/Tone/component/Volume.js:25:1)
   at t.Synth.t.Instrument [as constructor] (node_modules/tone/build/webpack:/Tone/Tone/instrument/Instrument.js:22:1)
   at t.Synth.call [as constructor] (node_modules/tone/build/webpack:/Tone/Tone/instrument/Monophonic.js:18:1)
   at new call (node_modules/tone/build/webpack:/Tone/Tone/instrument/Synth.js:23:1)
   at Object.<anonymous>.it (src/App.test.tsx:15:17)

在您的代码中this.players也不是Observable，而是您的api返回的纯数据。

所以代替这个：

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

只需订阅：

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

试图从服务获取数据到component.ts

1 个答案: