Angular 5 Typescript 表示 webpack 失败，因为属性数据不存在于响应类型中

Question

webpack 编译好像出错了。如果我删除 .data 它会编译，但随后页面会因来自 template->component 的调用（调用服务

我收到错误

ERROR in src/app/components/app-landing-page/app-landing-page.component.ts(95,41): error TS2339: Property 'data' does not exist on type 'Response'.

 webpack:  Failed to compile

那是我的组件有

this.referrals = result.data;

组件：

this.arsSevice.getArsCodesApi(this.model)
    .subscribe(
        result => {

            this.referrals = result.data;
            console.log('component',result);
        })

服务：

getArsCodesApi(search: arsCodes) {
    return this.http.post(this.serviceUrl, JSON.stringify(search), httpOptions)
    JSON.stringify(search), options)
        .map((response: Response) => {
            return response;              
        })
  }

仅供参考 http 是新的 httpclient

一旦我在没有 .data 的情况下编译它——运行 ng serve --open 然后我必须在

中添加 .data

如果我不添加它，调用将失败，我会收到此错误

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

为什么???（console.log 清楚地表明这是数据：Array(16)）

编辑更新 显示 console.log 数据

Answer 1

这就像 Nicholas Pesa 评论的那样，HttpClient 在对象中解析你的响应，它不知道它是什么形状。因此，要么使用括号表示法，要么输入您的数据（推荐）：

export interface MyResponse {
  data: MyType[];
}

export interface MyType {
  ID: number;
  ARSCode: string;
  // rest of properties
}

然后明确地告诉 Angular 您正在接收类型 MyResponse 的响应，作为奖励，您还可以告诉 Angular 您期望的数据类型，即可观察数据MyType 数组：

getArsCodesApi(search: arsCodes): Observable<MyType[]> {
  return this.http.post<MyResponse>(this.serviceUrl, search, httpOptions)
    .map(res => res.data)
}

然后在您的组件中订阅它。

referrals: MyType[] = [];

ngOnInit() {
  this.arsSevice.getArsCodesApi(this.model)
    .subscribe(
      result => {
        this.referrals = result;
        console.log('component',result);
    })
}

从文档中阅读有关使用 HttpClient 进行类型检查的更多信息：https://angular.io/guide/http#typechecking-the-response

Angular 5 Typescript 表示 webpack 失败，因为属性数据不存在于响应类型中

Angular 5 Typescript says webpack failed as Property data does not exists on type Response

javascript

observable

typescript

angular

angular-httpclient

Angular 5 Typescript 表示 webpack 失败，因为 属性 数据不存在于响应类型中

Angular 5 Typescript says webpack failed as Property data does not exists on type Response

javascript

observable

typescript

angular

angular-httpclient

Angular 5 Typescript 表示 webpack 失败，因为属性数据不存在于响应类型中