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

Posted 2023-03-13

【中文标题】以角度声明对象的可观察数组

【英文标题】：Declare observable array of object in angular

【发布时间】：2018-12-20 08:07:45

【问题描述】：

我尝试显示一个对象数组，多个函数将不得不改变它。 所以我试着让它成为一个可观察的（也许我错了）。

打字稿版本：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 : type 'Observable'' is not an array or a string type。 我可以向谁声明我需要什么？

谢谢！

编辑 - 视图代码：

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

【问题讨论】：

什么是错误跟踪？哪一行有误？

我有一种感觉，您尝试在视图中绑定列表或在某处将其用作数组。数组的结果是对象本身，而不是该对象中的数组。因此，如果您想从 Observable<isolementInterface> 获取数组，则需要在接口中定义的 result.ISOLEMENTS。

@trichetriche 我的错误在我的声明中。

@Gijs Post，是的，我想在我的组件视图中将它用作数组，我希望它是可观察的，所以当我在某些函数中更改它时，我的视图会更新（但也许我误解了一个概念）

@Pylouface 您能否提供您的视图代码，以便我们看看那里发生了什么？

【参考方案1】：

我知道出了什么问题。你打了一个电话，然后你订阅了它。订阅一个 observable 总是在它发出后返回 observable 的值。如果要将变量声明为 observable 本身，只需将其分配为调用：

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

如果您只想要 observable 本身，则不需要订阅它。如果您想稍后在视图中使用该值，您可以在此处简单地 pipe 它（或者稍后在组件中订阅它，如果您想要的话）。

（编辑）： 在您看来，将其更改为：

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

将异步管道与 *ngFor 分开，否则它将无法工作。

【讨论】：

我明白为什么我所做的无法正常工作。我没有任何错误，但我的数据不显示。为了触发请求，我需要调用订阅，如果我使用你的语法 listeIsolements 是一个 Observable 但不包含我的网络服务响应

Angular '订阅' 到 observable 如果你在视图中使用管道，你不需要担心。如果您的呼叫响应不包含正确的模型，您可能有一些语法错误（即您的呼叫返回的不是 isolementInterface ）

100% 正确 :) 在我看来，我犯了小语法错误。一切正常，谢谢！

【参考方案2】：

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

【讨论】：

你如何添加它？更新了吗？