Alguns métodos não são carregados com ngOnInit

Arquivo Ts

import { Component, OnInit } from '@angular/core';
import { Event } from '@angular/router';
import { FaleConoscoService } from './fale-conosco.service';
import { Mensagem } from './fale-conosco.';
import { element } from 'protractor';

@Component({
  selector: 'app-fale-conosco',
  templateUrl: './fale-conosco.component.html',
  styleUrls: ['./fale-conosco.component.scss']
})
export class FaleConoscoComponent implements OnInit {

  private mensagem : Mensagem = null
  private mensagens : Mensagem [] = []
  private errorMsg : string

  constructor(private faleConoscoService : FaleConoscoService) { }

  ngOnInit() {
    this.getMensagens()
    this.addToArray()    
  }

  private submit(nome:string, email:string, text:string){
    this.mensagem.nome=nome
    this.mensagem.email=email
    this.mensagem.text=text
    this.faleConoscoService.sendMensagem(this.mensagem)
  }

  private addToArray(){
    this.mensagens.forEach(element => {
      var i = 1
      element['target']='#collapse'+i
      element['expanded']=false
      element['labelledby']='headingOne'+i
      i++
    });
  }

  private getMensagens(){
    this.faleConoscoService.getMensagens().subscribe(data => this.mensagens = data, error => this.errorMsg = error)
    this.addToArray() 
  }

  ver(){
    this.addToArray() 
    console.log(this.mensagens)
  }

}

Tenho um array de mensagens que é preenchido através do método getMensagens() que é evocado em ngOnInit(). Evoco também um método chamado addToArray(), que serve para acrescentar alguns atributos a cada objeto do array. O método getMensagens() realmente é evocado e preenche o array porém o segundo método é evocado porém os valores não são acrescentados ao array.

<div class="accordion" id="accordionExample">
      <div class="card" *ngFor="let mensagem of mensagens; index as i">
        <div class="card-header" id="headingOne">
          <h2 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Nome : {{mensagem?.nome}} | Email : {{mensagem?.email}}
            </button>
          </h2>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
              {{mensagem?.text}}
          </div>
        </div>
      </div>
    </div>

</section>
<div (click)="ver()">

</div>

Os valores só são acrescentados ao clicar na div após o carregamento do ngOnInit. Perguntas:

• O que faço para que o método seja realmente evocado e funcione sem que tenha que clicar em outro lugar para carregar o método.
• Queria dar o valor de

  element['target']='#collapse'+i
  element['expanded']=false
  element['labelledby']='headingOne'+i

  em: data-target='target' , aria-expanded='expanded ', aria-labelledby='labelledby'

Desde já, obrigado