angular - 在页面加载/刷新时以随机顺序显示由 Firebase Data 提供的 Angular 6 mat-card

Question

我显示来自 firebase 的数据。当我更改表单的值或刷新页面时，我想以随机顺序显示我的卡片。有可能的？

这是我的组件模板：

<ng-container *ngFor="let geoToDisplay  of geosToDisplay | async">
  <ng-container *ngIf="toppings2.value.includes(geoToDisplay.esSos)">
    <ng-container *ngIf="toppings.value.includes(geoToDisplay.typeSos)">
      <div class="col">
        <mat-card>BLABLA
        </mat-card>
      </div>
    </ng-container>
  </ng-container>
</ng-container>

Answer 1

您可以使用

setInterval(() => {
    this.randomCard = this.geosToDisplay[Math.floor(Math.random() * this.geosToDisplay.length)]; // this'll get the random value depending on your array length
  }, 30000);

并将其绑定为，

 <mat-card >{{randomCard}}</mat-card>