角度：从模板中的可观察数组中获取随机元素

Question

我正在尝试从 Observable 数组中获取随机元素以在模板中使用。目前我正在使用

@Select(SomeState.tiles) tiles$: Observable<Tile[]>;

和

getRandomTile$(): Observable<Tile> {
  return this.tiles$.pipe(
      map(tiles => {
        return tiles[Math.floor(Math.random() * tiles.length)];
      })
  );
}

并在模板中

<ng-container *ngFor="let tile of othertiles; index as i">
    <div *ngIf="i % 8 == 0 && (tiles$ | async)?.length">
          <ng-container *ngIf="getRandomTile$() | async; let r">
              <img [src]="r.imgUrl" />
          </ng-container>
      </div>
</ng-container>

然而，滚动时图像会发生变化，因为它似乎在不断更新。

在 get 方法中添加

take(1)

似乎也没有帮助。

有人知道如何让它正常工作吗？ :)

Answer 1

问题是由于您的应用程序中触发了更改检测。 当发生这种情况时，模板中使用的函数将再次评估，导致随机元素发生变化。

不要将随机逻辑公开为函数，而是将其公开为变量：

randomTile$: Observable<Tile> = this.tiles$.pipe(
      map(tiles => {
        return tiles[Math.floor(Math.random() * tiles.length)];
      })
  );