以角度声明可观察对象的数组

时间:2018-07-12 07:32:53

标签: angular typescript observable

我尝试显示一个对象数组,多个功能将不得不对其进行更改。 因此,我尝试使其变得可观察(也许我错了)。

打字稿版本:2.7.2 rxjs:6.2.1 角度cli:6.0.8 节点:8.11.3 角度:6.0.7

我的服务(IsolementService)中有一个变量声明为:

public listeIsolements$: Observable<isolementInterface>;

我的服务主要有两种方法

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
}

接口:

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[];
}

我的服务是在组件中调用:

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);
}

但是,当我编译时,我遇到一个错误TS2495:类型'Observable'不是数组或字符串类型。 我可以向谁声明我需要什么?

谢谢!

编辑-视图代码:

<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>

2 个答案:

答案 0 :(得分:1)

我知道出了什么问题。您打了电话,但随后订阅了它。订阅可观察对象总是在其发出后返回其值。如果要将变量声明为可观察变量本身,只需将其分配为调用:

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

如果只需要可观察的对象,则不需要订阅。如果您想稍后在视图中使用该值,则可以在那里简单地pipe(或在稍后在组件中订阅,如果您想要的话)。

(编辑): 在您看来,将其更改为:

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

从* ngFor中分离出异步管道,否则它将无法正常工作。

答案 1 :(得分:0)

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