Angular6 轮询不返回数据

Question

我有一个 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)
   }

Answer 1

假设您想要一组项目，您可以使用类似这样的东西。

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

Angular6 轮询不返回数据

Angular6 polling not returning data

javascript

rest

polling

rxjs

angular