Свойство «json» не существует для типа «Объект»
Невозможно загружать данные асинхронно с официальным SDK. Однако вы можете получить доступ ко всем данным в firebase, используя REST API. Это позволит вам совершать синхронные вызовы. Как уже упоминалось, Firebase - это база данных в режиме реального времени, и при изменении ваших данных будет отсутствовать функция обновлений.
3 ответа
ОБНОВЛЕНИЕ: для rxjs> v5.5
Как упоминалось в некоторых комментариях и других ответах, по умолчанию HttpClient десериализует содержимое ответа в объект. Некоторые из его методов позволяют передавать аргумент универсального типа, чтобы утвердительно набрать результат. Вот почему больше нет json() метода.
import {throwError} from 'rxjs';
import {catchError, map} from 'rxjs/operators';
export interface Order {
// Properties
}
interface ResponseOrders {
results: Order[];
}
@Injectable()
export class FooService {
ctor(private http: HttpClient){}
fetch(startIndex: number, limit: number): Observable<Order[]> {
let params = new HttpParams();
params = params.set('startIndex',startIndex.toString()).set('limit',limit.toString());
// base URL should not have ? in it at the en
return this.http.get<ResponseOrders >(this.baseUrl,{
params
}).pipe(
map(res => res.results || []),
catchError(error => _throwError(error.message || error))
);
}
Обратите внимание, что вы можете легко преобразовать возвращенный Observable в Promise, просто вызвав toPromise().
ОРИГИНАЛЬНЫЙ ОТВЕТ:
В вашем случае вы можете
Предполагая, что ваш бэкэнд возвращает что-то вроде:
{results: [{},{}]}
в формате JSON, где каждый {} является сериализованным объектом, вам потребуется следующее:
// Somewhere in your src folder
export interface Order {
// Properties
}
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Order } from 'somewhere_in_src';
@Injectable()
export class FooService {
ctor(private http: HttpClient){}
fetch(startIndex: number, limit: number): Observable<Order[]> {
let params = new HttpParams();
params = params.set('startIndex',startIndex.toString()).set('limit',limit.toString());
// base URL should not have ? in it at the en
return this.http.get(this.baseUrl,{
params
})
.map(res => res.results as Order[] || []);
// in case that the property results in the res POJO doesnt exist (res.results returns null) then return empty array ([])
}
}
Я удалил секцию catch, так как она может быть заархивирована через перехватчик HTTP. Проверьте документы . Например:
https://gist.github.com/jotatoledo/765c7f6d8a755613cafca97e83313b90
И чтобы потреблять, вам просто нужно назвать его как:
// In some component for example
this.fooService.fetch(...).subscribe(data => ...); // data is Order[]
@Voicu имеет правильное решение и спасибо за подсказку.
Для будущих посетителей: в новом HttpClient (Angular 4.3+) объектом ответа по умолчанию является JSON, поэтому вам больше не нужно выполнять response.json (). Data. Просто используйте ответ напрямую.
Для будущих посетителей : В новом HttpClient (Angular 4.3+) объект response по умолчанию является JSON, поэтому вам не нужно делать response.json().data больше. Просто используйте response напрямую.
Пример (изменено из официальной документации):
import { HttpClient } from '@angular/common/http';
@Component(...)
export class YourComponent implements OnInit {
// Inject HttpClient into your component or service.
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.http.get('https://api.github.com/users')
.subscribe(response => console.log(response));
}
}
Не забудьте импортировать его и включить модуль в import в [проекта] 1113] app.module.ts :
...
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
// Include it under 'imports' in your application module after BrowserModule.
HttpClientModule,
...
],
...