Angular，转换 JSON，Rxjs 运算符，Typescript

Posted 2023-03-13

【中文标题】Angular，转换 JSON，Rxjs 运算符，Typescript

【英文标题】：Angular, Converting JSON , Rxjs Opertaor, Typescript

【发布时间】：2020-10-16 05:46:32

【问题描述】：

我从服务器收到以下对象 (Survay) JSON 格式

/******************************************/

    
        "id": 870,
        "title": "test survay ",
        "questions": [
            
                "id": 871,
               
                "data": "question data 1"
               
            ,
            
                "id": 874,
                "data": "question data 2"
              
            ,
            
                "id": 877,
                "data": "question data 3"
                
            
           
        ],
        "user": 
            "id": 788,
            "name": "mohamed",
            "answres": [
              
              
                "data":"answere question 1"
              
              ,
              
                "data":"answere question 2"
              
              ,
              
                "data":"answere question 3"
              
              
              
              ]
           
    
        
 
   

我使用了以下代码

getSurvayByid(id: number) 
            const headers = new HttpHeaders(
                'Authorization': this.loadToken(),
                'Content-Type': 'application/json'
            );
            return this.http.get<Survay>(this.host + "/survay/" + id,  headers: headers )
                .pipe(map(resp => resp));
    
        

我想更改显示的格式：

我的问题：如何使用 Rxjs 运算符获得这种格式？ (map, take, pipe...) 并更改方法 getSurvayByid(id: number)

 
        "id": 870,
        "title": "test survay ",
        "questions": [
            
                "id": 871,
               
                "data": "question data 1",
                "answer":"answere question 1"
               
            ,
            
                "id": 874,
                "data": "question data 2",
                 "answer":"answere question 2"
              
            ,
            
                "id": 877,
                "data": "question data 3",
                 "answer":"answere question 3"
                
            
           
        ],
        "user": 
            "id": 788,
            "name": "mohamed"
        
        
    

【参考方案1】：

假设答案顺序正确，您可以这样做：

    return this.http.get<Survay>(this.host + "/survay/" + id,  headers: headers ).pipe(
       map((resp: Survay): Survay => 
          resp.questions.forEach((question, i) => question.answer = resp.answers.length == 0 ? '' : resp.answers[i].data);
          return resp;
       )
    );

我假设返回类型也是Survay。请替换为正确的返回类型。

【讨论】：

谢谢你的回答，但是返回的类型 getSurvayByid(id: number ) 它从 Observable a Observable 改变，所以为了纠正这个问题，在 toPromise().then 中应用 forEach或 subscribe() 请参阅下面的答案

您应该通过正确使用 typescript 而不是转换为 Promises 来解决此类类型问题。 RxJS 非常强大，使用 toPromise 削弱了它的潜力。我会用正确的类型更新我的答案。

【参考方案2】：

getSurvayByid(id).toPromise().then(s => 


            s.questions.forEach((q,i)=>this.answers=s.user.answres!
                if(this.answers.length==0)
                    q.answer="";
                


          else 
                q.answer=this.answers[i].data;
            
           
            
            )
          
           
        

【讨论】：

虽然此解决方案有效，但我建议通过正确使用 typescript 而不是使用 toPromise 来修复类型错误。使用此解决方案，您不能使用 RxJS 运算符。