Опрос Angular6 не возвращает данные - PullRequest
Новая
       32

Опрос Angular6 не возвращает данные

0 голосов
/ 18 октября 2018

У меня есть приложение Angular, в котором я пытаюсь проверять внешнюю службу данных на наличие изменений каждые несколько секунд и обновлять представление.

Я пытался реализовать опрос из rxjs, но я не могу получить доступ к объекту, наоборот, кажется, что функция опроса не работает, но предположим, что это потому, что возвращаемый объект недоступен.

app.component.ts 

export class AppComponent {
  polledItems: Observable<Item>;
  items : Item[] = [];
  title = 'site';
  landing = true;
  tap = false;
  url:string;
  Math: any;

  getScreen(randomCode) {
    const items$: Observable<any> = this.dataService.get_screen(randomCode)
      .pipe(tap( () => {
      this.landing = false; 
      this.Math = Math
     }
    ));

    const polledItems$ = timer(0, 1000)
    .pipe(( () => items$))
    console.log(this.polledItems);
    console.log(items$);
  }

выдержка из app.component.html 

<h3 class="beer-name text-white">{{(polledItems$ | async).item_name}}</h3>

выдержка из data.service.ts 

   get_screen(randomCode) { 
    return this.httpClient.get(this.apiUrl + '/tap/' + randomCode)
   }

1 Ответ

0 голосов
/ 18 октября 2018

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

// dont subscribe here but use the 
// observable directly or with async pipe
private readonly items$: Observable<Item[]> = this.dataService.get_screen(randomCode)
    // do your side effects in rxjs tap()
    // better move this to your polledItems$
    // observable after the switchMap
   .pipe(
     tap( () => { return {this.landing = false; this.Math = Math}; })
    );

// get new items periodicly
public readonly polledItems$ = timer(0, 1000)
   .pipe(
      concatMap( () => items$),
      tap( items => console.log(items))
   )

шаблон: 

// pipe your observable through async and THEN access the member
<ng-container *ngFor="let polledItem of (polledItems$ | async)>
    <h3 class="item-name text-white">{{polledItem.item_name}}</h3>
</ng-container>

посмотрите на: https://blog.strongbrew.io/rxjs-polling/

если вы не ожидаете массив, а единственный, который вам не нужен, ngFor, но получите доступ к вашему item_name, например: 

<h3 class="item-name text-white">{{(polledItems$ | async).item_name}}</h3>
...