Pass an object with queryParams in the Router

I have an array of objects that I reccure with an ngFor. Later down I have a navigation bar in which I redirect to one or another component and I need to pass the selected object above. However, the most I get is to receive a literal "[Object object]

HTML

<div>
  <div *ngFor="let visit of list">
    <span (click)="selected(visit.id)">
      <span class="photo">{{ visit.urlFoto }}</span>
      <span id="text-data">
        <span>{{ visit.cliente.nombre }} {{ visit.cliente.apellidos }}</span>
        <span>{{ visit.cliente.apellido2}}</span>
      </span> 
    </span>    
  </div>
</div>
<nav class="navbar navbar-expand-lg">   
  <ul class="nav nav-tabs">
<li class="nav-item">
      <a class="nav-link" [routerLink]="['client']" [queryParams]="{'p': this.index - 1, 'list': this.listVisits[this.index - 1]}">Client Detail</a>
    </li>
</ul>
</nav>

TS of the client component:

ngOnInit() {
    this.sub = this.routeParams.queryParams.subscribe( params => {
      this.index = params['p'];
      this.listVisits = params['list'];
      console.log(this.listVisits); 
    })
  }