Angular 9 - 从对象数组中删除重复项答案

【问题标题】：Angular 9 - Remove duplicates from array of objectsAngular 9 - 从对象数组中删除重复项
【发布时间】：2020-05-25 15:41:21
【问题描述】：

我在构建过滤器数据管道时遇到问题。我想传递从我的对象中删除重复的数据。

这是我的 ngFor：

<ng-container *ngFor="let message of messages | filterDates">

我想通过这个管道传递我的消息数组，以从每个对象中删除重复的日期。我数组中的每个对象都有

'timestamp': 1590064423327

有些对象有相同的时间戳，有些则没有。如果数组中的前一个对象具有相同的时间戳值，我想在这些对象中将时间戳设置为空。如果以前的时间戳值不同，我想传递当前对象中的时间戳。

为了更好地理解，示例如下：我正在从我的 API 接收带有时间戳的消息。我只想显示第一条消息的日期，因为下一条消息来自同一天，所以不需要显示这些消息的日期。如果下一条消息不是来自同一天，我只想显示下一个时间戳的第一条消息日期值。它用于按日期对消息进行分组。

我为此准备了管道，但不幸的是，我不确定要在此管道中做什么才能实现这一特定目标。我很确定，我应该使用 Lodash，但我不知道应该使用哪个运算符。提前感谢您的帮助。

这是我从@Yogesh 开发者回答中遇到的问题：

我认为这里的问题是，它会将 null 推送到数组元素，然后将下一项与 null 时间戳进行比较。我忘了提到，我必须以格式化日期的方式比较时间戳，因为时间戳是秒数，所以它们总是不同的。这就是我将格式化日期与 momentjs 进行比较的方式：

if (index > 0 && (moment(message.timestamp).format('DD/MM/YYYY') == moment(messages[index - 1].timestamp).format('DD/MM/YYYY'))) {
        message.timestamp = null
      }
      finalMessages.push(message)

【问题讨论】：

您可以使用简单的 for-each 循环遍历您的数组，保存最后一个时间戳并将其与当前时间戳进行比较。每当省略时间戳时，为每个条目创建一个新对象，并将它们推送到新数组。
你在管道中尝试过什么？
我已经从 lodash 尝试了 uniqBy，但这只是按时间戳对我的对象进行分组，并删除了所有具有相同时间戳的对象

标签： angular lodash

【解决方案1】：

应该没问题

let finalMessages = [];
let prevTimestamp = null;
messages.forEach((message, index) => {
  if (moment(message.timestamp).isSame(moment(prevTimestamp), 'days')) {
    message.timestamp = null
  } else {
    prevTimestamp = message.timestamp
  }
  finalMessages.push(message)
})

【讨论】：

正是我需要的！谢谢！

【解决方案2】：

您可以在 filterDate 管道中执行类似操作：

let finalMessages = []
messages.forEach((message, index) => {
  if (index > 0 && (message.timestamp == messages[index - 1])) {
    message.timestamp = null
  }
  finalMessages.push(message)
})

【讨论】：

这几乎就像我想要的那样工作，我最近尝试过，但这仅适用于范围索引为 1 的消息。我必须一次将此逻辑应用于我的所有对象，因为一旦我将 null 传递给特定对象，它将在下一次迭代中检查它是否相同，现在不一样，因为数组中的前一个对象的时间戳为 null 值。
如果之前的对象有 null timestamp 那么这意味着这个消息不是之前的组的一部分，新的组从这里开始。它有什么问题？
我已经用更多信息更新了这个问题

【解决方案3】：

简单的解决方案是在您的 javascript 中创建一个 displayMessages 数组，然后在您的 NgFor 循环中使用 displayMessages。

let displayMessages = [];
let timeStampHash = {};
messages.forEach(message) => {
  if (!timeStampHash[message.timestamp]) {
    timeStampHash[message.timestamp] = true;
    displayMessages.push(message);
  }
})
this.displayMessages = displayMessages;

【讨论】：