时间戳

首页 > 解决方案 > 可观察到的角度订阅返回未定义

javascript - 可观察到的角度订阅返回未定义

问题描述

我的服务

import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";
import { SearchResult } from "../Components/container-search/Models/SearchResult";
import { environment } from "../../environments/environment";
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Injectable({
  providedIn: "root",
})
export class ContainerService {
  constructor(public http: HttpClient) {}

  private SearchResults: SearchResult[] = [];
  public headers = {
    headers: new HttpHeaders({
      "Content-Type": "application/json",
    }),
  };

  public Search(): Observable<SearchResult[]> {
    if (this.SearchResults.length === 0) {
       this.http
        .get<SearchResult[]>(
          environment.endpointURL + "/FooBar/Search",
          this.headers
        )
        .subscribe((x) => {
          this.SearchResults = x;
          return of(this.SearchResults);
        });
    } else {
      return of(this.SearchResults);
    }
  }
}

当我在组件中调用 Search() 时，它会返回

TypeError: Cannot read property 'subscribe' of undefined

我的调用代码是

  ngOnInit(): void {
    this.dataSource.paginator = this.paginator;
     this.searchService.Search().subscribe((x) => {
      this.dataSource = new MatTableDataSource<SearchResult>(x);
    });
  }

有人可以解释为什么这段代码this.searchService.Search()总是会返回上述错误吗？

标签： javascriptangular

解决方案

该.subscribe调用返回一个Observable，但这不是该Search方法返回的内容。订阅是一个异步过程。subscribe启动该过程并仅在 http 调用返回时做出反应，但该方法Search继续执行并返回未定义。

下面的代码将Observable直接从 http 调用返回并解决您的问题。

import { tap } from 'rxjs/operators';

public Search(): Observable<SearchResult[]> {
    if (this.SearchResults.length === 0) {
       return this.http
        .get<SearchResult[]>(
          environment.endpointURL + "/FooBar/Search",
          this.headers
        ).pipe(tap(x => this.SearchResults = x));
    } else {
      return of(this.SearchResults);
    }
  }

推荐阅读