Declare observable array of object in angular

Question

I try to display an array of object, multiple function will have to alter it. So i try to make it an observable (maybe i'm wrong).

Typescript version : 2.7.2 rxjs : 6.2.1 angular cli : 6.0.8 Node : 8.11.3 Angular : 6.0.7

I have a variable in my service(IsolementService) declared as:

public listeIsolements$: Observable<isolementInterface>;

I have two main method in my service

getIsolements(mydate1:any, mydate2:any){
    let dateToSend = ""
    let headers =  {headers: new  HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded'})};
    this.http.post('foo/mywebservice.php', dateToSend, headers).subscribe((data:  Observable<isolementInterface>) => {
        this.listeIsolements$ = data;
    });
}

alteredList(mode:string){
    // Some alteration to listeIsolements$, without http call
}

Interface :

export interface RENOUVELLEMENT {
    _PERSON_ID?: any;
    _ACTIVITY_ID: string;
    _UF: string;
    _PRESCRIPTEUR_RENOUVELLEMENT: string;
    _ISOLEMENT_CH_STANDARD?: any;
    _ISOLEMENT_COMMENTAIRE?: any;
    _MODIF_MESURE_SOIN_DT_TM: string;
    _MOTIF_MAINTIEN?: any;
    _DATE_RENOUVELLEMENT: string;
}

export interface ISOLEMENT {
    _PERSON_ID: string;
    _ACTIVITY_ID: string;
    _ACTIVITY_ID_FIN: string;
    _NOM: string;
    _PRENOM: string;
    _IPP: string;
    _IEP: string;
    _DATE_NAISSANCE: string;
    _SEXE: string;
    _DEBUT_SEJ: string;
    _FIN_SEJ: string;
    _PRESCRIPTEUR: string;
    _DEBUT_ISOLEMENT: string;
    _FIN_ISOLEMENT: string;
    _UF: string;
    _CHAMBRE_STANDARD: string;
    _RAISON_CHAMBRE_STANDARD: string;
    _PATIENT_INFORME_MODALITE: string;
    _FAMILLE_PREVENU: string;
    _MODE_HOSPI: string;
    _INDICATIONS: string;
    _MESURES_PREVENTIVES: string;
    _CIRCONSTANCES?: any;
    _MED_PRESCRI_SORTIE: string;
    _OBSERVATIONS_SORTIE?: any;
    _RENOUVELLEMENTS: RENOUVELLEMENT[];
}

export interface isolementInterface {
    ISOLEMENTS: ISOLEMENT[];
}

My service is call in component :

constructor(public IsolementService : IsolementService, public myGestionUserService : GestionUserService) { }
ngOnInit() {
}


/*________________________________________________________________________________________________________*/
// Fonction call on submit
onSubmit(form: NgForm) {
    const send_date_deb = form.value['date_deb'];
    const send_date_fin = form.value['date_fin'];
    this.IsolementService.getIsolements(send_date_deb, send_date_fin);
}

But when i compile i have a an error TS2495 : type 'Observable'' is not an array or a string type. Who can i declare what i need ?

Thanks !

EDIT - code of view :

<tr *ngFor="let iso of IsolementService.listeIsolements$ | async">
                            <td class="filterable-cell">{{ iso._NOM }}</td>
                            <td class="filterable-cell">{{ iso._PRENOM }}</td>
                            <td class="filterable-cell">{{ iso._IPP }}</td>
                            <td class="filterable-cell">{{ iso._IEP }}</td>
                            <td class="filterable-cell">{{ iso._DATE_NAISSANCE }}</td>
                            <td class="filterable-cell">{{ iso._SEXE }}</td>
                            <td class="filterable-cell">{{ iso._DEBUT_SEJ }}</td>
                            <td class="filterable-cell">{{ iso._FIN_SEJ }}</td>
                            <td class="filterable-cell">{{ iso._DEBUT_ISOLEMENT }}</td>
                            <td class="filterable-cell">{{ iso._FIN_ISOLEMENT }}</td>
                            <td class="filterable-cell"></td>
                            <td class="filterable-cell">{{ iso._PRESCRIPTEUR }}</td>
                            <td class="filterable-cell">{{ iso._UF }}</td>
                            <td class="filterable-cell"></td>
                            <td class="filterable-cell">{{ iso._CHAMBRE_STANDARD }}</td>
                            <td class="filterable-cell">{{ iso._RAISON_CHAMBRE_STANDARD }}</td>
                            <td class="filterable-cell">{{ iso._PATIENT_INFORME_MODALITE }}</td>
                            <td class="filterable-cell">{{ iso._FAMILLE_PREVENU }}</td>
                            <td class="filterable-cell">{{ iso._MODE_HOSPI }}</td>
                            <td class="filterable-cell">{{ iso._INDICATIONS }}</td>
                            <td class="filterable-cell">{{ iso._MESURES_PREVENTIVES }}</td>
                            <td class="filterable-cell">{{ iso._CIRCONSTANCES }}</td>
                            <td class="filterable-cell">{{ iso._MED_PRESCRI_SORTIE }}</td>
                            <td class="filterable-cell">{{ iso._OBSERVATIONS_SORTIE }}</td>
                        </tr>

I have a feeling that you try to bind the list in the view or use it somewhere as an array. The result of the array is the object itself and not the array within that object.So if you want to get the array from Observable<isolementInterface> you would want result.ISOLEMENTS as defined in your interface. — Gijs Post
@Gijs Post, yes i would like to use it as array in my component view, i would like it to be observable so when i alter it in some function my view will update (but maybe i misunderstood a concept) — Pylouface
@Pylouface Can you provide the code of your view so we can see what happens there? — Gijs Post

Gijs Post Gijs Post · Accepted Answer · 2018-07-12T08:16:02

I see what goes wrong. You make a call, but then you subscribe to it. Subscribing to an observable always return the value of the observable after it emits it. If you want to declare the variable as the observable itself, you simply assign it as the call:

this.listeIsolements$ = this.http.post('foo/mywebservice.php', dateToSend, headers);

You don't need to subscribe to it if you only want the observable itself. If you want to use the value later on in the view, you can simply pipe it there (or subscribe to it in the component later on, if thats what you want).

(Edit): In your view, change it to:

<div *ngIf="IsolementService.listeIsolements$ | async as isolements">
<tr *ngFor="let iso of isolements.ISOLEMENTS">

Seperate the async pipe from the *ngFor otherwise it won't work.

Declare observable array of object in angular

2 Answers