Question

在当前的Angular 6应用程序中，有一个可观察的订阅（来自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"
 }

因此，订阅中的bag并不是一个bag对象，而是一个http响应，它将bag对象包裹在其主体中

现在我真的很想从上面的对象中提取body并投射到本地对象

那么如何安全地提取数据并从subscription（...）返回的上方转换对象？

Answer 1

我怀疑这个对象是ResponseEntity from Spring，而不是angular的HttpResponse。告诉是statusCodeValue，它不是angular的HttpResponse的属性。如果您要序列化Spring ResponseEntitys并将它们作为响应发送并观察响应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)
        );
    }
}

我希望这会有所帮助！

Answer 2

我认为您没有订阅TypeScript，而是在视图中使用了异步管道

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

在您的TypeScript和视图中

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

这就是异步管道的用途，您不必担心管理订阅。

Answer 3

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
}

如何对本地对象进行可观察的响应

3 个答案: