Функция Push перезаписывает каждый элемент массива в Angular

Question

Я пытаюсь отправить некоторые сообщения разговора в массив, используя следующий код:

myConversations: IConversation[] = [];
myConversationMessage: IConversationMessages = {
conversationId: 0,
messageId: 0,
messageText: ''
};
myConversationMessages: IConversationMessages[] = [];

this.conversationService.getConversations().subscribe(conversations => {
  this.myConversations = conversations;

  for (let i of this.myConversations) {
    this.myConversationMessage.conversationId = i.conversationId;       
    for (let j of i.messages) {
      this.myConversationMessage.messageId = j.messageId;
      this.myConversationMessage.messageText = j.messageText; 
      this.myConversationMessages.push(this.myConversationMessage);
    }
  }

  console.log(this.myConversationMessages);
});

Я получаю беседы и сообщения внутри них из объекта JSON. Вместо отправки каждого сообщения в массив myConversationMessages в консоль выводится следующее:

0 
conversationId: 2
messageId:2
messageText: "testing"

1
conversationId: 2
messageId:2
messageText: "testing"

2
conversationId: 2
messageId:2
messageText: "testing"

3
conversationId: 2
messageId:2
messageText: "testing"

Таким образом, последний объект "разговор" перезаписывает каждый элемент массива.

Может кто-нибудь сказать мне, почему мой код делает это? Большое спасибо заранее

P.S. Я могу загрузить дополнительный код, если он разрешит мою проблему.

Answer 1

Это потому, что объекты JavaScript передаются по ссылке:

myConversationMessages: IConversationMessages[] = [];

this.conversationService.getConversations().subscribe(conversations => {
  this.myConversations = conversations;

  for (let i of this.myConversations) {
    this.myConversationMessage.conversationId = i.conversationId;       
    for (let j of i.messages) {
      this.myConversationMessage.messageId = j.messageId;
      this.myConversationMessage.messageText = j.messageText; 
      this.myConversationMessages.push(this.myConversationMessage); // <-= Here you are pushing a reference to the same object in every loop. In every loop you are updating the single object, and the reference in each array spot points to the same object
    }
  }

  console.log(this.myConversationMessages);
});

Попробуйте:

  for (let i of this.myConversations) {
    for (let j of i.messages) {
      this.myConversationMessages.push({
          conversationId: i.conversationId,
          messageId: j.messageId,
          messageText: j.messageText
      });
    }
  }

Это создаст новый объект для каждой итерации

Answer 2

Это произошло потому, что вы добавили ссылочный объект в массив.В вашем примере вы не добавили 3 объекта в массив, вы добавили три ссылки на один объект три раза.И изменение свойств в одном из них вызывает изменение во всех других.

Должно быть работает:

for (let i of this.myConversations) {
    this.myConversationMessage.conversationId = i.conversationId;       
    for (let j of i.messages) {
      let item = new IConversationMessages();
      item.messageId = j.messageId;
      item.messageText = j.messageText; 
      this.myConversationMessages.push(item);
    }
  }