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

【问题标题】：Angular, Converting JSON , Rxjs Opertaor, TypescriptAngular，转换 JSON，Rxjs 运算符，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"
        
        }
    }

【问题讨论】：

标签： json angular typescript rxjs operators

【解决方案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 运算符。