Javascript 如何将可观测响应投射到局部对象

在当前Angular 6应用程序中，有一个订阅observable（来自RESTful服务的响应）

订阅正在等待解析程序的响应

@Injectable({
  providedIn: 'root'
})
export class BagResolver implements Resolve<Bag> {
  constructor(private service: BagService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const id = route.params['id'] ? route.params['id'] : null;
    if (id) {
      const existingBag = this.service.find(id).pipe(map((bag: HttpResponse<Bag>) => bag.body));
      return existingBag;
    }

    return of(new Bag());
  }
}

@可注入({
providedIn:'根'
})
导出类BagResolver实现解析{
构造函数（专用服务：BagService）{}
解析（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）{
const id=route.params['id']？route.params['id']：null；
如果（id）{
const existingBag=this.service.find（id）.pipe（map（（bag:HttpResponse）=>bag.body））；
归还现有行李；
}
归还（新行李）（）；
}
}

运行调试模式，我发现bag是一个具有以下结构的对象

Object
{headers:,
 body{id:10, name:aName, ...},  <-- this is the actual bag object
 statusCode:"OK",
 statusCodeValue:"200"
 }

对象
{头：，
body{id:10，name:aName，…}，我建议您不要订阅类型脚本，而在视图中使用异步管道

bag$ = this.activatedRoute.data.pipe(
    map(res => res.body) // This will map your data to extract the body
);

在您的打字脚本和视图中

<div *ngIf="bag$ | async as bag">
    {{bag | json}}
</div>


{{bag | json}

这就是异步管道的用途，您不必担心管理订阅。
我怀疑这个对象是angular的一个而不是一个HttpResponse。告诉是
statusCodeValue
，它不是angular的HttpResponse的属性。如果您正在序列化spring ResponseEntity并将它们作为响应和ob发送为响应
主体提供服务（间接或直接，此处均为真），您需要在前端创建一个类似的界面，并在服务中使用它：

If the response in json format then you can write directly
this.http.method(url, option).pipe(map((this.handelResponse))

handelResponse(res: Response){
    data = res.json;
    // do whatever you want
    return data // or return your object
}

接口响应性{
标题：{[headerName:string]：string}，
正文：T，
状态代码：“确定”|“服务器错误”|“错误请求”//等
statusCodeValue:“200”|“500”|“400”|“404”//etc
}

样品服务

import { ResponseEntity } from "./dir/dir/file";

class BagService {
    constructor(http: HttpClient) {}

    find(id: string): Observable<Bag> {
        return this.http.get<ResponseEntity<Bag>>(`/bag/${id}`).pipe(
            map(resp => resp.body)
        );
    }
}

从“/dir/dir/file”导入{ResponseEntity}；
行李分类服务{
构造函数（http:HttpClient）{}
find（id:string）：可观察{
返回这个.http.get（`/bag/${id}`）.pipe(
映射（resp=>resp.body）
);
}
}

我希望这会有所帮助！
谢谢，但不幸的是，我必须先对包对象进行一些处理，然后再将其抛出/绑定到HTML。然后在映射函数中执行此操作，这就是映射的用途。有趣的是，它订阅了一个解析器，该解析器实际上执行管道工作，我刚刚更新了ticket。我认为订阅本身会将最终对象包装在http中传递给订阅服务器时的响应。否则，解析程序为什么已经返回了主体，但从订阅服务器返回的主体仍然用HttpResponseI包装。我还得到了“`TS2559:Type'Observable'与Type'Bag'没有共同的属性。上面语句中的错误有趣…您是否使用了Spring？@Rafael是的Web服务是c由Spring Boot创建如果我不正确，我需要查看
this.service.find（id）
的实现以进行进一步调查。我的基本假设是您的服务正在观察响应主体。
import { ResponseEntity } from "./dir/dir/file";

class BagService {
    constructor(http: HttpClient) {}

    find(id: string): Observable<Bag> {
        return this.http.get<ResponseEntity<Bag>>(`/bag/${id}`).pipe(
            map(resp => resp.body)
        );
    }
}