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元素

2 个答案: