각도에 대한 응답을위한 인터페이스를 작성하는 방법 httpclient

각도의 새 httpclient를 사용하여 API에서 데이터를 가져 오려고하면 IMessage [] 유형에 오류 속성이 표시되지 않습니다. 어떻게하면 다음과 같은 응답을위한 인터페이스, 내가 여기에 시도 무엇 각도에 대한 응답을위한 인터페이스를 작성하는 방법 httpclient

{"data":{"Messages":[{"Id":28,"MessageContent":"test data tsn","FromUserId":"74df8f98-2925-4242-8d32-8b09f3691396","UserName":"[email protected]","ToUserId":"96b1c943-ade0-4026-b8ed-0f4a6231e586","ProductId":null,"ParentMessageId":null,"Subject":"Test Message by Dev Team","StyleNumber":null}],"Pagination":{"Page":1,"PageLength":20,"TotalRecords":20,"TotalPages":1},"MessageLimit":{"TotalMessageCount":5,"RemainingMessageCount":3}}}

export interface IMessage { 
    data: { 
     Messages: Messages[]; 
    }; 
} 

interface Messages { 
    id: number; 
    messageContent: string; 
    fromUserId: string; 
    toUserId: string; 
    productId?: number; 
    parentMessageId?: number; 
    subject: string; 
    styleNumber?: string; 
}

내 code stackblitz에

// Here is the code 
    import { Component, Input, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { IMessage } from './message.interface'; 
import { HttpClient, HttpResponse, HttpParams, HttpHeaders } from '@angular/common/http'; 

@Component({ 
    selector: 'hello', 
    template: `<h1>Hello {{name}}!</h1>`, 
    styles: [`h1 { font-family: Lato; }`] 
}) 
export class HelloComponent implements OnInit { 
    constructor (private http: HttpClient) { 
     console.log('Message repository service instance'); 
    } 
     readonly ROOT_URL = '//52.70.78.117:7111/api/message'; 
ngOnInit() { 
    this.getAllMessages(); 
    } 
    @Input() name: string; 
    messages; 
    getAllMessages(): Observable<IMessage[]> { 
    this.getAllMessagesFromApi() 
    .subscribe(data => { 
     console.log('data is =>', data.data); 
     this.messages = data; 
    }, 
    err => { 
     console.log('Error occured while fetching message List'); 
    }); 
    return; 
    } 
    getAllMessagesFromApi(): Observable<IMessage[]> { 
     return this.http.get<IMessage[]>(`${this.ROOT_URL}/list`); 
    } 
}

출처

2017-12-04 Karty

보인다. 페이지 매김 및 MessageLimit 속성을 추가 할 수 있습니다. – omeralper

하지만 형식 오류 – Karty

이 표시됩니다. 오류를 묻는 경우 관련 코드를 게시하고 정확하고 완전한 오류 메시지를 게시하십시오. –

당신은 무엇을 변경해야합니다 쓰기 않습니다 getAllMessagesFromAPI() 메서드를 입력하면로 반환됩니다. 당신이 올바른지처럼

// method returns type IMessage 
getAllMessagesFromApi(): Observable<IMessage> { 
    // http request returns type IMessage 
    return this.http.get<IMessage>(`${this.ROOT_URL}/list`); 
}

지금 당신은 메시지의 배열에 액세스 할 수 있습니다

.subscribe(data => { 
    this.messages = data.data.Messages; 
},

출처

2017-12-04 16:01:48 LLai

각도에 대한 응답을위한 인터페이스를 작성하는 방법 httpclient

답변

관련 문제