Как навести заметный ответ на локальный объект

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 сверху и привести к локальному объекту

Итак, как же безопасно извлечь данные и привести объект сверху, вернуть из подписки (...)?

Answer 1

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
}

Answer 2

Я подозреваю, что этот объект является ResponseEntity из Spring и , а не HttpResponse от angular. Телосложение - statusCodeValue, которое не является свойством углового HttpResponse. Если вы сериализуете пружинные ResponseEntitys и отправляете их в качестве ответа И наблюдаете за ответом body (косвенно или прямо & mdash; здесь все выглядит как истина), вам необходимо создать аналогичный интерфейс во внешнем интерфейсе и использовать его в своем сервисе:

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 3

Я бы посоветовал вам не подписываться на 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>

Для этого и нужен асинхронный канал, и вам не нужно беспокоиться об управлении подписками.