在页面 Load/Refresh 上以随机顺序显示 Angular 6 张来自 Firebase 数据的卡片
Display Angular 6 mat-card sourced by Firebase Data in random order on Page Load/Refresh
我显示来自 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>
您可以使用
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>
我显示来自 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>
您可以使用
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>