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>

Answer 1

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.

Answer 2

let localArray: Observable<MyObject>[] = [];