Angular 4-Http到HttpClient-属性'；someproperty'；类型对象上不存在

我正在尝试将一个现有应用程序从使用

Http

更改为使用

HttpClient

，但是出现了一个错误

因此，在我的服务中，您现在可以看到新代码与被注释掉的旧代码：

constructor(
        // private http: Http
        private http: HttpClient
    ) { }

    getSidebar() {
        // return this.http.get('http://localhost:3000/sidebar/edit-sidebar')
        //     .map(res => res.json());
        return this.http.get('http://localhost:3000/sidebar/edit-sidebar');
    }

在我的

页面.component.ts

中，我有一个

this.sidebarService.getSidebar().subscribe(sidebar => {
                        this.sidebar = sidebar.content; // this does not work now
                    });

然而，对于我在上面评论的那行，我现在得到了这个错误：

Property 'content'
 does not exist on type 'Object'.

但是，如果我

console.log（侧栏）

{_id: "59dde326c7590a27a033fdec", content: "<h1>sidebar here</h1>"}

return this.http.get<Sidebar>('http://localhost:3000/sidebar/edit-sidebar');

{u id:“59dde326c7590a27a033fdec”，内容：“这里的边栏”}

那么问题是什么

---

同样，

Http

有效，但

HttpClient

无效。

您可以使用接口、类等指定要返回的类型。例如，您可以使用以下内容：

{_id: "59dde326c7590a27a033fdec", content: "<h1>sidebar here</h1>"}

return this.http.get<Sidebar>('http://localhost:3000/sidebar/edit-sidebar');

有关更多信息，请参见角度文档：

…TypeScript会正确地抱怨从HTTP返回的对象没有results属性。这是因为当HttpClient将JSON响应解析为一个对象时，它不知道该对象是什么形状

---

您可以使用接口、类等指定要返回的类型。例如，您可以使用以下内容：

{_id: "59dde326c7590a27a033fdec", content: "<h1>sidebar here</h1>"}

return this.http.get<Sidebar>('http://localhost:3000/sidebar/edit-sidebar');

有关更多信息，请参见角度文档：

…TypeScript会正确地抱怨从HTTP返回的对象没有results属性。这是因为当HttpClient将JSON响应解析为一个对象时，它不知道该对象是什么形状

---

HttpClient自动解析对对象的JSON响应，而该对象的形状未知，这就是Typescript显示此错误的原因

替代解决方案，使用括号表示法：

this.sidebarService.getSidebar().subscribe(sidebar => {
 this.sidebar = sidebar["content"];
});

---

HttpClient自动解析对对象的JSON响应，而该对象的形状未知，这就是Typescript显示此错误的原因

替代解决方案，使用括号表示法：

this.sidebarService.getSidebar().subscribe(sidebar => {
 this.sidebar = sidebar["content"];
});

---

您可以为变量（侧边栏）分配一个接口，以明确地告诉它将获得或分配给它什么，这样它就不会抛出编译时错误

this.sidebarService.getSidebar().subscribe((sidebar: any) => {
                        this.sidebar = sidebar.content; 
                    });

---

您可以为变量（侧边栏）分配一个接口，以明确地告诉它将获得或分配给它什么，这样它就不会抛出编译时错误

this.sidebarService.getSidebar().subscribe((sidebar: any) => {
                        this.sidebar = sidebar.content; 
                    });

---

使用括号符号而不是点符号引用侧栏['content']而不是侧栏。内容将解决问题。

HttpClient上的Angular文档部分提到了这一点，尽管还不是很清楚：

上面的subscribe回调需要括号表示法来提取 数据值。您无法写入

数据.heroesUrl

，因为TypeScript 正确地抱怨服务中的数据对象不存在 具有heroesUrl属性

---

使用括号符号而不是点符号引用侧栏['content']而不是侧栏。内容将解决问题。

HttpClient上的Angular文档部分提到了这一点，尽管还不是很清楚：

上面的subscribe回调需要括号表示法来提取 数据值。您无法写入

数据.heroesUrl

，因为TypeScript 正确地抱怨服务中的数据对象不存在 具有heroesUrl属性

---

您可以使用类型

如果您这样做，您将不会得到该错误

this.http.get<any>('http://localhost:3000/sidebar/edit-sidebar');

this.http.get（'http://localhost:3000/sidebar/edit-边栏“）；

您可以使用类型

如果您这样做，您将不会得到该错误

this.http.get<any>('http://localhost:3000/sidebar/edit-sidebar');

this.http.get（'http://localhost:3000/sidebar/edit-边栏“）；

错误描述

src/app/home.component.ts（131,20）中出错：错误TS2339:Property 类型“{}”上不存在“someProperty”

为什么会发生？

我认为这个错误在服务文件中，每当您进行http调用并且该调用返回任何对象（json）或对象数组（json），那么您的http调用应该返回该结果类型的可观察或模型

Home.service.ts

   connectToServer(data)  {
        return this.http.post('http://localhost:5000/connect' , data)
    }

假设我有上面的Post http调用，我通过在“data”中传递数据连接到服务器，这个请求返回我连接对象（Json）。但是当你看到我没有指定用于保存结果的可观察对象或模型时，如果我从component.ts访问结果对象属性，它会说result.somepropery在{}上不存在

解决方案

   connectToServer(data)  {
        return this.http.post('http://localhost:5000/connect' , data)
    }

第一:

connectToServer(data) : Observable<any> {
            return this.http.post('http://localhost:5000/connect' , data)
        }

connectToServer（数据）：可观察{
返回此.http.post（'http://localhost:5000/connect",数据)
}

注意：不要忘记导入可观察的

第二：

  connectToServer(data) :  <Connection> {
                return this.http.post('http://localhost:5000/connect' , data)
            }

connectToServer（数据）：{
返回此.http.post（'http://localhost:5000/connect",数据)
}

---

在第二种情况下，您需要定义用于声明连接对象字段的接口，并需要在此处导入。

错误描述

src/app/home.component.ts（131,20）中出错：错误TS2339:Property 类型“{}”上不存在“someProperty”

为什么会发生？

我认为这个错误在服务文件中，每当您进行http调用并且该调用返回任何对象（json）或对象数组（json），那么您的http调用应该返回该结果类型的可观察或模型

Home.service.ts

   connectToServer(data)  {
        return this.http.post('http://localhost:5000/connect' , data)
    }

假设我有上面的Post http调用，我通过在“data”中传递数据连接到服务器，这个请求返回我连接对象（Json）。但是当你看到我没有指定用于保存结果的可观察对象或模型时，如果我从component.ts访问结果对象属性，它会说result.somepropery在{}上不存在

解决方案