角度の必要性のためのインターフェイスの記述方法httpclient

Question

angleの新しいhttpclientを使用してapiからデータを取得しようとしていますが、エラープロパティーがIMessage []型に存在しません。どのように私はここにしようとした何

{"data":{"Messages":[{"Id":28,"MessageContent":"test data tsn","FromUserId":"74df8f98-2925-4242-8d32-8b09f3691396","UserName":"365@test.com","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}}} 

、あなたは何を変更する必要があり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`); 
    } 
} 

Answer 1

上

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、次の応答のためのインタフェースを記述しますあなたの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; 
},