如何将值从后端 Nest JS 映射到前端 Angular？

Question

后端Nest JS服务代码：

async show(): Promise<any> {
  var response: dto = new dto();
  var data = await this.sequelize.query('Exec API_Select',
    {
      type: sequelize.QueryTypes.SELECT
    });
    if(data.length>0){
       data.map((item:any) =>  {  
        
        response.foo1=item.foo1;
        response.foo2=item.foo2;
        response.foo3=item.foo3;

       });
    return response;
    }
}

前端 Angular 代码（服务）：

getdata(){
  const headers = new HttpHeaders().set('Content-Type', 'application/json').set('Authorization','Bearer'+' '+token);



this.http.post<interface1>('http://localhost:3000/getdata/',null,{headers})
    .pipe(map(data => ({
      foo1:data.foo1,
      foo2:data.foo2,
      foo3:data.foo3
    })))
    .subscribe(foo => console.log(foo))
}

现在，如果我在例如data.foo1 然后它工作（这意味着 Angular 中的服务和组件代码很好。后端也工作正常，因为我可以在 Postman 中获取数据。唯一的问题是将数据从后端映射到前端。

我试过 .subscribe 而不是 .map 但它不起作用。我也试过没有 <interface1> 但结果还是一样。

我是这个领域的初学者，也是 Nest JS 和 Angular 的新手。请看一看。谢谢。

编辑：

return this.http.post('http://localhost:3000/getdata/',null,{headers}).subscribe(data => {
     this.dataout = data});

如果我将值作为单个变量获取，例如在上面的代码中，data 被获取，并且在 Backend 中有一个变量 data。那么它也可以正常工作。唯一的问题是映射。

API 邮递员回复：

{
    "statusCode": 200,
    "isSuccess": true,
    "message": "ok",
    "data": [
        {
            "foo1": 3,
            "foo2": "abc",
            "foo3": "def",
 
        },
        {
            "foo1": 1,
            "foo2": "ghi",
            "foo3": "jkl",

        }
    ]
}

Answer 1

使用正确的回复语法

this.http
  .post<interface1>('http://localhost:3000/getdata/',null,{headers})
    .pipe(map(({ data }) => ({
      foo1:data.foo1,
      foo2:data.foo2,
      foo3:data.foo3
    })))
    .subscribe(foo => console.log(foo))
}

如何将值从后端 Nest JS 映射到前端 Angular？

How to map values from Backend Nest JS to Frontend Angular?

angular

frontend

mapping

nestjs

backend