将对象转换为数组，然后每隔几秒显示一个元素

Question

我像这样在我的服务中调用 API

getItems(): Observable<{}> {
    return this.http.get(<path>)
    .pipe(
      pluck('items'),
    );
  }

以这种形状返回数据：

items: Object { key: value, key: value, key: value ...}

我在我的组件中订阅了这个

items$!: any;
constructor(private readonly service: Service) { }

  ngOnInit(): void {
    this.service.getItems().subscribe(items => this.items$ = items);
  }

并像这样在我的模板中显示它们

<div *ngFor="let item of items$ | keyvalue">
    <mat-card>
        <mat-card-header>
          {{item.key}}
        </mat-card-header>
        <mat-card-content>
          {{item.value}}
        </mat-card-content>
    </mat-card>
</div>

但是，我真正想要的是每隔几秒左右一次循环显示这些项目，而不是一次显示所有项目。我还想只进行一次 http 调用来完成此操作。我环顾四周，发现了解决方案的一些细节，但是，它通常涉及至少将对象转换为数组，然后可能使用某种主题来观察订阅的原始 observable？有什么方法可以做到这一点？谢谢。

Answer 1

一种解决方案是将 API 中的数据转换为具有以下结构的数组：

const apiData = [{ a: 1 }, { b: 2 }, { c: 3 }, { d: 4 }, { e: 5 }, { f: 6 }];

接下来，您可以使用以下代码，该代码使用 bufferCount、concatMap 和 delay 运算符

data = [];

from(apiData)
  .pipe(
    bufferCount(1),
    concatMap(objs => of(objs).pipe(delay(3000)))
  )
  .subscribe(e => {
    this.data.push(e);
  });

在模板上

<div *ngFor="let item of data">
    {{item | json}}    <-- tweak around with it to get exact details you need -->
</div>

Answer 2

创建一个每 5 秒发出一个值并与所有订阅者共享相同值的流。

item$: Observable<Item>;

ngOnInit(): void { 
  this.item$ = this.service.getItems().pipe(
    switchMap(items => zip(
      from(items),
      timer(0,5000)
    )),
    map(([x,_]) => x),
    share()
  );
}

订阅流。异步管道是使用 angular 实现此目的的最佳方式

<div>
    <mat-card>
        <mat-card-header>
          {{(item$ | async).key}}
        </mat-card-header>
        <mat-card-content>
          {{(item$ | async).value}}
        </mat-card-content>
    </mat-card>
</div>

更新 - 使用自定义运算符

function intervalArray<T>(milliseconds = 1000): OperatorFunction<T[], T> {

  return s => s.pipe(
    concatMap((a: T[]) => zip(
      from(a),
      timer(0, milliseconds)
    ).pipe(
      map(([x,_]) => x)
    ))
  );
  
}

ngOnInit(): void { 
  this.item$ = this.service.getItems().pipe(
    intervalArray(5000),
    share()
  );
}

Answer 3

谢谢尼古拉斯先生。你一直很有帮助。我将 Mrk 的答案标记为答案，因为基本上我使用了他们的代码。以防万一有人好奇是什么解决了我在 cmets 中提到的几件事，并想在上下文中查看整个解决方案，这就是我所做的全部

//in the service
getItems(): Observable<{}> {
    return this.http.get(<URL>)
    .pipe(
      pluck('items'),
    );
  }

//in the template, this change stopped the initial null issue I was having
<div *ngIf="item$ | async as state">
  <mat-card>
      <mat-card-header>
        {{state.currencyPair}}
      </mat-card-header>
      <mat-card-content>
        {{state.exchangeRate}}
      </mat-card-content>
  </mat-card>
</div>

//in the component
  item$!: Observable<Item>;
  constructor(private readonly service: Service) { }

  ngOnInit(): void {
    this.item$ = this.service.getItems().pipe(
      switchMap(items => zip(
        from(this.objectToArray(items)),
        timer(0,5000)
      )),
      map(([x,_]) => x),
      shareReplay(1)
    );
  }

  objectToArray(object: {}) {
    let items: Item[] = [];
    for (const [key, value] of Object.entries(object)) { 
      items.push({ key : key, value : value })
    }
    return items;
  }

//item.ts
export interface Item {
    key: string;
    value: any;
}

现在刷新 objectToArray 后得到未定义对象的问题显然是 API 的问题，因为我的免费计划不支持 https 加密哈哈。我认为我通过将 s 从 URL 中取出来解决了这个问题，但 耸了耸肩。

Nicholas，如果您愿意分享，我真的很想看看您的代码在上下文中是如何工作的。无论如何，我需要深入了解 Angular 库并了解更多信息。谢谢！