如何将可观察的响应投射到本地对象

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

  this.activatedRoute.data.subscribe(({bag}) => {
    console.log(bag);
    this.bag= bag;
  });

订阅正在等待解析器的响应

@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());
  }
}

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

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

So bag订阅中的内容并不是真正的 bag 对象，而是看起来像一个将 bag 对象包装在其主体中的 http 响应

现在我真的想提取body从上面的对象并转换为本地对象

那么如何安全地提取数据并从上面的 subscribe(...) 返回中转换对象呢？

我怀疑这个物体是Spring 的响应实体 https://github.com/spring-projects/spring-framework/blob/master/spring-web/src/main/java/org/springframework/http/ResponseEntity.java and 不是来自角度的 HttpResponse。告诉我们的是statusCodeValue这不是 Angular 的 Http Response 的属性。如果您正在序列化 spring ResponseEntity 并将它们作为响应发送并观察响应body（间接或直接——这里都出现了），您需要在前端创建一个类似的接口并在您的服务中使用它：

interface ResponseEntity<T> {
   headers: { [headerName: string]: string },
   body: T,
   statusCode: "OK" | "SERVER_ERROR" | "BAD_REQUEST", //etc
   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)
        );
    }
}

我希望这有帮助！