Как отобразить объект ответа на интерфейс типа, состоящий из нескольких других интерфейсов типа в Angular 7 - PullRequest
Новая
       35

Как отобразить объект ответа на интерфейс типа, состоящий из нескольких других интерфейсов типа в Angular 7

0 голосов
/ 28 марта 2019

У меня есть следующий интерфейс: 

export interface ObjLookup {
    owner?: IObjOwner;
    contacts?: IOwnerContacts[];
    location?: IOwnerLocation;
}

И это включает в себя следующие интерфейсы: 

export interface IObjOwner {
    lastName?: string,
    firstName?: string;
}

export interface IOwnerContacts {
    name?: string;
    address?: string;
    email?: string;
}

export interface IOwnerLocation {
    address?: string;
    city?: string;
    state?: string;
    zip?: number;
    country?: string;
}

Теперь мой объект ответа выглядит примерно так: 

{
    status: "success",
    is_error: false,
    errors: [],
    data: {
        owner: {
            lastName: "lovejoy",
            firstName: "reverend"
        }, 
        contacts: [
            {
                  name: "homer simpson",
                  address: "3 evergreen terrace, springfield, XX XX823",
                  email: "homer@springfieldnuclearpower.net"
            },
            {
                  name: "ned flanders",
                  address: "5 evergreen terrace, springfield, XX XX823",
                  email: "ned@somechurch.god"
            }
        ],
        location: {
            address: "the church",
            city: "Springfield",
            state: "XX",
            zip: XX823,
            country: "US"
        }
    }
}

Пожалуйста, игнорируйте любые синтаксические ошибки в ответе json, когда я его печатал.

В любом случае, я думаю, что мне нужно сделать что-то вроде отображения ответа с помощью наблюдаемых, трубопроводов и прочего. То, что у меня пока есть: 

export class SimpsonsService {
     public resourceUrl = 'www.example.com/api/simpsons';

     constructor ( protected http: HttpClient) {}

    find(name: string): Observable<EntityResponseType> {

        return this.http.get<ObjLookup>(`${this.resourceUrl}/${name}`)
           .pipe(
               map(respObj => {
                   const
               })
           );
        });
    }
}

Я пробовал несколько представлений, где мне нужно извлечь объект ответа и создать несколько отдельных типов, сопоставленных с различными интерфейсами, а затем включить их как часть большего типа ответа ObjLookup.

Что мне нужно сделать, чтобы перехватить соответствующие объекты данных как часть response.data.owner, response.data.contacts, response.data.location объектов?

Ответы [ 2 ]

0 голосов
/ 28 марта 2019

Вы можете попробовать это 

owner:  IObjOwner;
contacts: IOwnerContacts[];
location: IOwnerLocation;

return this.http.get<ObjLookup>(`${this.resourceUrl}/${name}`)
           .pipe(
               map(respObj => {
                   this.owner= respObj.data.owner
                   this.contacts= respObj.data.contacts
                   this.location= respObj.data.location
                   //do something
               })
           );
        });
0 голосов
/ 28 марта 2019

Просто введите тип 

    <IObjOwner>response.data.owner
    <Array<IOwnerContacts>>response.data.contacts
    <IOwnerLocation>response.data.location

Для data wasnt a property of response вы должны либо сделать тип возврата объекта response как any.Или создайте новый интерфейс со всеми свойствами объекта ответа и укажите тип этого интерфейса для объекта response.Скажем, 

export interface IDataResponse {
    owner?: IObjOwner;
    contacts?: Array<IOwnerContacts>;
    location?: IOwnerLocation
}

export interface IResponse {
    status?: string;
    is_error?: boolean;
    errors?: Array<any>;
    data?: IDataResponse;
}

И использовать как, 

owner:  IObjOwner;
contacts: Array<IOwnerContacts> = [];
location: IOwnerLocation;

return this.http.get<ObjLookup>(`${this.resourceUrl}/${name}`)
           .pipe(
               map((response: IResponse)=> {
                  this.owner =  <IObjOwner>response.data.owner
                  this.contacts =  <Array<IOwnerContacts>>response.data.contacts
                  this.locations = <IOwnerLocation>response.data.location
               })
           );
   });
...