1

我似乎在 webpack 编译时遇到了错误。如果我删除它会编译，.data但是页面会因模板->组件（调用服务）的调用而爆炸

我得到的错误

src/app/components/app-landing-page/app-landing-page.component.ts(95,41) 中的错误：错误 TS2339：“响应”类型上不存在属性“数据”。

 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

如果我不添加它，调用将无法正常工作，我会收到此错误

找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

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

编辑更新 显示数据的 console.log

console.log 数据数组的屏幕截图

4

1 回答 1

1

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

export interface MyResponse {
  data: MyType[];
}

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

然后明确告诉 Angular 你正在接收 type 的响应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

于 2017-12-10T19:06:53.667 回答