洗牌两个 ngFor 循环的元素

Question

我有一个使用此代码的 Angualar 项目：

<app-red-elements *ngFor="let redElement of redElements" [element]="redElement"></app-video>
<app-blue-elements *ngFor="let bluElement of blueElements" [element]="blueElement"></app-video>

并显示：

1.redElement
2.redElement
3.redElement
1.blueElement
2.blueElement
3.blueElement

我想为用户提供一个随机排列元素的选项。不仅红色元素彼此之间和蓝色元素彼此之间，而且红色和蓝色元素彼此之间。例如，这是一个有效的配置：

1.redElement
2.blueElement
2.redElement
1.blueElement
3.blueElement
3.redElement

据我所知，我不能用上面的 HTML 来做到这一点。您推荐什么解决方案？

Answer 1

您可以使用lodash shuffle方法来实现。

<app-red-elements *ngFor="let redElement of getRandom(redElements)" [element]="redElement"></app-video>
<app-blue-elements *ngFor="let bluElement of getRandom(blueElements)" [element]="blueElement"></app-video>

添加组件方法如下，

getRandom(arrayToBeShuffled){
   _.shuffle(arrayToBeShuffled);
}

根据聊天更新

要让它们打乱顺序，您应该将其作为单个数组，如下所示，

<span *ngFor="let element of elements"> 
<app-red-elements *ngIf="element.type === 'Red'" [element]="element.redElement"></app-video> 
<app-blue-elements *ngIf="element.type === 'Blue'" [element]="element.blueElement"></app-video> 
</span>

您的 elements 应该有额外的属性 type 看起来像

elements=[
    {type:'Red',redElement:...}
    {type:'Blue',blueElement:...}
]

Answer 2

希望对您有所帮助：

shufflingArray (value: any[]) {

    let items: any[] = [];

    for (let i = 0; i < value.length; i++) {
      items.push(value[i]);
    }

    // reversing items array
    for (let i = items.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      // console.log([items[i], items[j]]);
      // console.log([items[j], items[i]]);
      [items[i], items[j]] = [items[j], items[i]];
    }
    return items;
}

洗牌两个 ngFor 循环的元素

shuffle elements of two ngFor loops

ngfor

angular