Угловая выборка объекта JSON из API и сохранение его в переменной, проверьте, существует ли - PullRequest
Новая
       26

Угловая выборка объекта JSON из API и сохранение его в переменной, проверьте, существует ли

0 голосов
/ 16 июня 2019

Я работаю над угловым проектом и У меня есть проблема, которую мне не удалось решить ... 

//part of class Data
constructor(private fetchData: FetchData) {
  this.subscription = timer(0, 1000000).pipe(
        switchMap(() => this.fetchData.getData())
    ).subscribe((result) => this.data = result);
}

private data: any;
private subscription: Subscription;

public getData(): Object {
    return this.data.data_property;
}

Он сообщает об ошибках из-за условий выполнения, и я хочу решить эту проблему, ожидая заполнения переменной. Все приложение нуждается в этом, так что это очень важно. Я хочу решить эту проблему с помощью Observable от Angulars rxjs, но я не получил его на работу, я довольно новичок в этом. Кстати, и FetchData, и класс данных являются @Injectable Services.

Если у кого-то есть дополнительный совет для меня, чтобы преобразовать переменные данные в тип интерфейса, например "myData" Я был бы очень счастлив, потому что я не хочу использовать взломать с любым. Проблема в том, что getData из FetchData возвращает просто объект из HttpClient: 

//part of class FetchData
getData() {
    return this.http.get(this.dataUrl)
    .pipe(
        catchError(this.handleError)
      );
}

Танки для помощи в любом случае. Сообщество Love Stackoverflow: D

Ответы [ 2 ]

0 голосов
/ 16 июня 2019

Один из подходов может быть следующим -

Настройте свою службу данных следующим образом - 

  export class DataService {

  //This is
  private _data$: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  data$: Observable<any>;

  constructor(private fetchData: FetchData) {
    this.data$ = this._data$.pipe(filter(d => !!d));
    this.getData();
   }      

  getData() {

    timer(0, 1000000).pipe(
      switchMap(() => this.fetchData.getData()),
      tap(d => {
        this._data$.next(d);
      })
    ).subscribe();
  }
}

Теперь, чтобы использовать DataService.data $, выполните следующие действия вкомпонент [В этом примере я предполагаю, что это HomeComponent], где вы хотите использовать извлеченные данные [вы можете использовать data $ observable в любом количестве компонентов / служб, сколько хотите, он будет выдавать последние извлеченные данные из серверной части] - 

export class HomeComponent implements OnInit {

  constructor(private dataService: DataService) { }

  data$: Observable<any>;

  ngOnInit() {
    this.data$ = this.dataService.data$;
  }    
}

в html HomeComponent 

<div *ngIf="data$ | async as data">
  <!-- Render your 'data' -->
</div>
0 голосов
/ 16 июня 2019

Основная проблема

  1. Если вам нужно загрузить некоторые данные перед загрузкой приложения app_initializer можно использовать Угловой: как правильно реализовать APP_INITIALIZER
  2. Возможно, в этом фрагменте ссылки вместо поля класса this.data следует использовать вместо самого класса Data 
public getData(): Object {
    return this.data.data_property;
}

Тип ответа
Методы Http позволяют вам предоставить общий, как это this.http.get<CustomResponseInterface>()

...