각도 4 - HttpClient에 HTTP - 'someproperty'속성이 유형 객체에 존재하지 않습니다.

Question

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

그리고에 내 page.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(sidebar) 다음과 같은 메시지가 표시됩니다.

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

그래서 무엇이 문제입니까?

다시 한번, Http은 작동하지만 HttpClient은 그렇지 않습니다.

는

Answer 1

당신은 예를 들어, 다음과 같이 사용할 수있는 등 인터페이스, 클래스를 사용하여 반환되는 유형을 지정할 수 있습니다 : 예를 들어

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

을, 사이드 바는 다음과 같이 정의 될 수 있습니다

interface Sidebar { 
    _id: string; 
    content: string; 
} 

추가 정보에 대한 각도 문서에서 Typechecking the response를 참조하십시오

... 타이프 라이터 HTTP에서 돌아 오는 Object에 results 속성이 없다는 것에 대해서는 정확하게 불평 할 것입니다. HttpClient가 JSON 응답을 Object로 파싱하는 동안 그 객체가 어떤 모양인지 모르기 때문입니다.

Answer 2

대체 솔루션 : 자동으로 객체와 객체의 모양으로 JSON 응답을 알 수없는 구문 분석 HttpClient를, HttpClient를의 값을 반환합니다

this.sidebar = sidebar["content"]; 

, 즉 왜 타이프 공연이 오류

입니다

Answer 3

는 가입 방법에 인터페이스 사이드를 추가하려고 :

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

interface Sidebar { 
    _id?: string; 
    content?: string; 
} 

Answer 4

당신을 C 변수 (사이드 바)에 인터페이스를 명시 적으로 할당하여 컴파일 타임 오류가 발생하지 않도록합니다.

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