Angular6轮询不返回数据

Question

I have an Angular application where I am trying to check an external data service for changes every few seconds, and update the view.

I've tried to implement Polling from rxjs but I'm not able to access the object, conversely it seems the polling function isn't working but assume this is because the returned object is inaccessible.

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$);
  }

excerpt from app.component.html

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

excerpt from data.service.ts

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

Answer 1

assuming that you want an array of items you could go with something like this.

// 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))
   )

the template:

// 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>

take a look at: https://blog.strongbrew.io/rxjs-polling/

if you are not awaiting an array but a single than you dont need the ngFor but access your item_name like:

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