随机播放对象的对象或在模板中的 Angular 2 中随机显示元素答案

【问题标题】：Shuffle object of objects or display randomly elements in Angular 2 in template随机播放对象的对象或在模板中的 Angular 2 中随机显示元素
【发布时间】：2018-10-28 19:03:13
【问题描述】：

我有一个结构如下的对象：

我在 Object.keys 的帮助下显示模板中的所有图像

在我拥有的组件中：

this.objectKeys = Object.keys;

在模板中：

<ul id="thumbnailsList">
  <li *ngFor="let key of objectKeys(newTmp)">
    <img src="{{newTmp[key].url}}">
  </li>
</ul>

目前一切正常，但是我想随机播放我的图片，所以每次刷新页面时，图片都会改变它们的顺序。

我知道，对象没有定义顺序，因此无法操作组件中的数据。我不想制作它的数组，因为对象的想法是快速搜索对象（我将来会有成千上万的图像并且在这种情况下循环通过数组不是好的解决方案，所以我会喜欢保留对象而不是数组）

我的问题是：这里有什么可能的解决方案？是否有可能直接在模板中重新排序图像而不接触组件？或者也许有一些方法可以打乱对象？

【问题讨论】：

Object.keys 返回一个数组
请将您的结构以纯文本形式发布，因为有些人由于代理原因无法访问 imgur。
您可能希望使用像 lodash 这样的库来更轻松地处理集合。 shuffle 是其中常用的实现函数。

标签： javascript angular typescript javascript-objects

【解决方案1】：

您可以创建一个管道，并将其包含在AppModule 的declarations 数组中。

src/app/core/pipes/random-order.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'randomOrder' })
export class RandomOrderPipe implements PipeTransform {
  transform(list: Array<any>): Array<any> {
    const newList = [...list];
    newList.sort(() => Math.random() - 0.5);
    return newList;
  }
}

src/app/app.module.ts

import { RandomOrderPipe } from './core/pipes/random-order.pipe';

@Module({
  declarations: [RandomOrderPipe, ...],
  ...
})

src/app/app.component.html

<div>
  <div *ngFor="item in list | randomOrder">
    <!-- -->
  </div>
</div>

【讨论】：

非常干净和完整的解决方案。赞成

【解决方案2】：

要创建洗牌函数，您需要使用数组。您可以做的就是像您一样，获取密钥，但是直接使用数组会更容易和更直观。

毕竟它代表的是一个图片列表，所以它不应该是一个对象。

可以借助reduce和splice对shuffle函数进行编码：

const images = ['dog', 'cat', 'degu', 'mouse', 'snake'];

function shuffle(list) {
  return list.reduce((p, n) => {
    const size = p.length;
    const index = Math.trunc(Math.random() * (size - 1));
    p.splice(index, 0, n);
    return p;
  }, []);
};

console.log(shuffle(images));
console.log(shuffle(images));
console.log(shuffle(images));

【讨论】：

（这是 Javascript 代码，但它是有效的 Typescript，因此您可以简单地将其复制并粘贴到您的组件中）

【解决方案3】：

您可以在排序回调中使用随机布尔生成器对 object.keys 返回的数组进行排序：

this.objectKey = (obj) => {  
    return Object.keys(obj).sort((a, b) => Math.random() >= 0.5);
};

您可以在下面看到随机排序的实际效果：

var objectKey = (obj) => {  
    return Object.keys(obj).sort((a, b) => Math.random() >= 0.5);
};

var obj = { prop1: '1', prop2: '1', prop2: '1', prop3: '1', prop4: '1', prop5: '1' };

console.log(objectKey(obj));
console.log(objectKey(obj));
console.log(objectKey(obj));
console.log(objectKey(obj));

【讨论】：