Estoy armando mi estructura de servicio para mi aplicación Angular 4 y he encontrado un problema.

Quiero llamar a una solicitud GET en mi API que me devolverá un User, pero dentro de ese usuario también debería devolver una lista de Applications

He creado un User.service.ts que se parece a:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UserService {

    constructor(private _http: HttpClient) { }

    getAllUsers(){
    }

    getUserById(){

    }

    createUser(){            
    }       
}

Entonces, cuando llamo a getUserById, me devolverá un objeto Usuario para el que he creado una interfaz:

interface User {
    id: string;
    FirstName: string;
    LastName: string;
    Email: string;
    Role: string;
    Applications: //LIST OF APPLICATIONS
}

¿Cómo obtengo la propiedad Aplicaciones vinculada a mi archivo Application.ts?

0
Ben Clarke 17 oct. 2017 a las 17:43

3 respuestas

La mejor respuesta

Cuando dices "Lista", probablemente te refieres a Array (construcción JavaScript de primera clase), por lo que probablemente quieras usar un Array de tipos Application.

import { Application } from './application.interface';

export interface User {
  /* ...other properties... */
  Applications: Array<Application>;
}

Tenga en cuenta que también podría escribir esto como Application[] y significaría lo mismo. Tu decides. Prefiero el primero ya que no hay un atajo análogo para otros genéricos. Por ejemplo, debe debe escribir Observable<Application>.

Ahora, al asignar o leer desde userInstance.Applications, se supone que cada propiedad de la matriz es una Aplicación.

Suponiendo que su interfaz Application es algo muy simple como { id: number, name: string }, tenga en cuenta lo siguiente:

// not allowed
userInstance.Applications.push(notAnApplication);
userInstance.Applications[0].otherProperty;

// allowed
userInstance.Applications[1].id;
userInstance.Applications.push({ id, name } as Application);

También tenga en cuenta que [Application] como declaración de tipo es no igual. Esta sería una matriz que tiene una sola propiedad que es del tipo Application.

Puede leer más sobre genéricos en Typecript aquí: https://www.typescriptlang.org/ docs / handbook / generics.html

1
Explosion Pills 17 oct. 2017 a las 15:14

Simplemente conviértalo en una variedad de aplicaciones:

Applications: Application[]
3
Derek Brown 17 oct. 2017 a las 14:46

En la parte superior de su archivo de código

import { Application } from './Application';

asegúrese de que la aplicación se exporte en Application.ts

Y luego su interfaz agrega

Applications: Application[];

Además

  • No olvide utilizar export para que se pueda acceder a los tipos fuera del archivo en el que se declaran.
  • Marque los tipos de retorno en sus métodos, omití CreateUser porque no estaba claro si devolvió algo o tomó un parámetro.

Código completo:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { Application } from './Application';

@Injectable()
export class UserService {

    constructor(private _http: HttpClient) { }

    getAllUsers() : Observable<User[]> {
    }
    getUserById() : Observable<User> {
    }
}


export interface User {
    id: string;
    FirstName: string;
    LastName: string;
    Email: string;
    Role: string;
    Applications: Application[];
}
0
Igor 17 oct. 2017 a las 14:49