Блог

У меня есть эта функция

 getAll<T>() {
   return this.http.get(`${environment.apiUrl}/products`);
}    
  

Я называю это так:

 this.productService.getAll()
    .pipe(first())
    .subscribe(products => {
        debugger
        let s = products;
        this.products = products.response;
    });   
  

Я получаю ошибку, подобную этой

Property 'response' does not exist on type 'Object'.ts(2339)

Ответ сервера может быть любым в этом формате:

 {"status":200,"error":null,"response":[]}
{"status":200,"error":null,"response":{}}
{"status":200,"error":null,"response":"any string"}
  

Основная причина проблемы связана с тем, что ожидаемый тип возвращаемого объекта не указан в вызове http.get().

По умолчанию метод http.get() возвращает обычный JSON. Следовательно, прямая ссылка на внутреннее свойство (пример: json_data.response) вызовет ошибку типа.

Как решить проблему?

Проблему можно решить, присвоив возвращаемый тип http.get(), используя <>

Фрагмент рабочего кода

 getAll: Observable<MyReturnType>() {
   return this.http.get<MyReturnType>(`${environment.apiUrl}/products`);
}    

this.productService.getAll()
    .pipe(first())
    .subscribe(products => {
        let s = products;
        this.products = s.response;
    });
  

Дополнительная информация:
https://angular.io/tutorial/toh-pt6

попробуйте отладить это, выполнив:

 this.productService.getAll()
.pipe(first())
.subscribe(products => {
    console.log(products);
    let s = products;
    this.products = products.response;
}); 
  

Я думаю, что проблема может быть в вашем бэкэнде здесь

Если это не поможет, попробуйте принудительно ввести тип для ответа. вы можете сделать что-то вроде этого:

 getAll() { return this.http.get<{status: number, error: any, response: any}>(${environment.apiUrl}/products); }
  

если все это не помогает, попробуйте исправить свой серверный сервер, чтобы отправлять вам только один тип (object)
вы никогда не должны возвращать массив в http-запрос.
Смотрите здесь:https://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx /

При подписке на HttpClient текст ответа принимается напрямую (если не запрошено иное), как показано ниже;

 this.productService.getAll().subscribe(body => this.products = body);
  

Кроме того, нет причин для использования first оператора, поскольку все наблюдаемые, возвращаемые HttpClient , завершаются при первом выпуске.