0

我正在尝试从服务器获取 jSon 并将其映射到 Angular 5 应用程序中的类。以下是没有错误的服务方法:

getSearchResultTable(hash: number): Observable<Model.SearchResult.RootObject> {

    return this.http.get<Model.SearchResult.RootObject>('http://somelink/api/SearchResult/123')
    .map(res => new Model.SearchResult.RootObject());
    return tmp;
}

以下组件类:

export class SearchResultPageComponent implements OnInit {
  searchResult: Model.SearchResult.RootObject;

  constructor(private searchResultService: SearchResultService, private router: Router) { }

  ngOnInit(): void {
    this.searchResultService.getSearchResultTable(122).subscribe( data => {
      this.searchResult = data;
    });
    let t = this.searchResult;
  }
}

Model.SearchResult.RootObject是一个复杂的对象,我在以下服务中由 json 生成它。

在所有示例中都描述了此方法......但在我的情况下this.searchResultundefined. 我做错了什么?

更新

我还尝试以某种方式删除map和更改服务方法:

getSearchResultTable(hash: number): Model.SearchResult.RootObject {
this.http.get<Model.SearchResult.RootObject>('http://somelink/api/SearchResult/123')
    .subscribe( data => {
        this.searchResult = data;
      });
    return this.searchResult;
}

和组件方法,如:

  ngOnInit(): void {
    this.searchResult = this.searchResultService.getSearchResultTable(122);
    }

服务获取下一个异常:

  • ReferenceError:数据未定义
  • 在评估(在 SearchResultService.getSearchResultTable 评估(webpack-internal:///../../../../../src/app/search-module/services/search-result.service.ts), :1:1)
  • 在 SearchResultService.getSearchResultTable (webpack-internal:///../../../../../src/app/search-module/services/search-result.service.ts:27:21)
  • 在 SearchResultPageComponent.ngOnInit (webpack-internal:///../../../../../src/app/search-module/pages/search-result/search-result.component.ts:23 :54)
  • 在 checkAndUpdateDirectiveInline (webpack-internal:///../../../core/esm5/core.js:12291:19)
  • 在 checkAndUpdateNodeInline (webpack-internal:///../../../core/esm5/core.js:13794:20)
  • 在 checkAndUpdateNode (webpack-internal:///../../../core/esm5/core.js:13737:16)
  • 在 debugCheckAndUpdateNode (webpack-internal:///../../../core/esm5/core.js:14609:76)
  • 在 debugCheckDirectivesFn (webpack-internal:///../../../core/esm5/core.js:14550:13)
  • 在 Object.eval [as updateDirectives] (ng:///SearchModule/SearchResultPageComponent_Host.ngfactory.js:9:5)
  • 在 Object.debugUpdateDirectives [as updateDirectives] (webpack-internal:///../../../core/esm5/core.js:14535:21)

更新

在我的情况下,以下片段是正确的:

this.http.get<Model.SearchResult.RootObject>('http://someurl/api/SearchResult/123')
.subscribe( (data: Model.SearchResult.RootObject) => {
    this.searchResult = data;
  });
return this.searchResult;
4

2 回答 2

0

在 Angular 5 中,您不需要使用 map,您可以在 subscribe 方法中直接以 json 形式转换您的响应

于 2017-11-17T15:20:14.173 回答
0

让我通过示例向您解释:这是我的服务(邮递员)以 json 格式返回数据。 在此处输入图像描述

现在这是我的组件的方法——调用服务方法的getdata

getdata() {
    this.apiHelperService.getdata().subscribe(domainres => {
      // this.domain = domainres,
      this.msg = JSON.stringify(domainres);//,  
      // this.availabilty = this.domain.Available
    }
      , error => { this.msg = "Error function: " + error; })

  }

现在这是我的服务:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';

@Injectable()
export class ApiHelperService {
    constructor(private _http: Http) { }

    getdata( ): Observable<any> {      

        return this._http.get("http://localhost:8080/domain/facebookjhjhj.com")
            .map((response: Response) => <any>response.json())
            .do(data => console.log("All: " + JSON.stringify(data)))
            .catch(this.handleError);
    }
    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

我在浏览器上得到这样的结果:

在此处输入图像描述

如果我评论该map()行,那么我的输出是这样的。

在此处输入图像描述

现在来回答你的问题看看这一行,你没有将 res 转换为任何东西,

.map(res => new Model.SearchResult.RootObject());

尝试这个 :

.map(res => <new Model.SearchResult.RootObject()>response.json());
于 2017-11-17T17:49:26.560 回答