Javascript Angular 5 Typescript表示Web包失败，因为类型响应上不存在属性数据

我好像在编译网页包时出错了。如果我删除

.data

，它就会编译，但随后页面会被来自模板->组件（调用服务）的调用所破坏

我犯了一个错误

src/app/components/app登录页/app登录页.component.ts（95,41）中出错：错误TS2339:类型“Response”上不存在属性“data”

这就是我的组件

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;              
        })
  }

FYI http是新的httpclient

一旦我在没有.data的情况下编译了它——使用

ngserve运行——打开

，那么我必须将.data添加回

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

找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到Iterables（如数组）

为什么？（console.log清楚地显示这是数据：数组（16））

编辑更新显示console.log数据

---

这就像Nicholas Pesa评论的那样，

HttpClient

解析对象中的响应，它不知道它是什么形状。因此，要么使用括号表示法，要么键入数据（推荐）：

然后明确告诉Angular您正在接收类型为

MyResponse

的响应，作为奖励，您还可以告诉Angular您期望的数据类型，即

MyType

的可观察数组：

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

---

阅读文档中有关使用

HttpClient

进行类型检查的更多信息：

可能重复@Al-Mothafar链接的问题有两个相互矛盾的答案，都不被接受，而且质量都很低。为什么有

.map（（response:response）=>{return response；}）之类的代码

？类型注释可以掩盖错误（删除它）。该函数除了（可能）更改可观察对象的静态类型外，不执行任何操作。此外，组件不应像这样展开结果属性，服务应对此进行处理。您可以添加什么console.log（“组件”，结果）吗；显示？您可能正试图迭代数组中的对象。@RildoGomez问题已更新，显示console.log thx的图像

export interface MyResponse {
  data: MyType[];
}

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

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);
    })
}