Variable returning Undefined

Question

I need to reclaim the value of one p which sits within one of my Components, that p receives the value of my API when the page is loaded.

To do this, I made one [(ngModel)]="user" and created a variable user that should receive this value, but in my console.log it is returned as Undefined.

Paragraph:

<p class="card-text" [(ngModel)]="usuarioDestino" name="usuarioDestino" ngDefaultControl>ID:{{usuario.id}}</p>

usuarioDestino: string;

The value of this P is loaded in onInit, so as soon as the page loads it is already there.

Can you help me?

Complete code:

import { Component,  OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { UsuariosService } from '../../services/usuarios.service'
import { ModalComponent } from '../modal/modal.component';
@Component({
  selector: 'app-lista-usuarios',
  templateUrl: './lista-usuarios.component.html',
  styleUrls: ['./lista-usuarios.component.css']
})
export class ListaUsuariosComponent implements OnInit {

  usuarios: Array<any> = new Array();
  usuarioDestino: string;


  constructor(private usuariosService: UsuariosService, private dialog: MatDialog ) { }

  ngOnInit(): void {
    this.getUsuarios();
    console.log(this.usuarioDestino);
  }


  getUsuarios(){
    this.usuariosService.userList().subscribe((resposta) => {
      this.usuarios = resposta;
      console.log(this.usuarios);
    });
  }


  openDialog(): void {
    const dialogRef = this.dialog.open(ModalComponent, {
      width: '800px',
    });
   
    const destino = this.usuarioDestino;
    console.log('Destino:', destino);
    
    

    dialogRef.componentInstance.usuarioDestino = this.usuarioDestino;

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

}

HTML:

<div class="w-100 containerFlex" *ngFor="let usuario of usuarios">
    <div class="card mb-3">
        <div class="row no-gutters">
          <div class="col-md-4">
            <img src="{{usuario.img}}" class="card-img" alt="...">
          </div>
          <div class="col-md-8">
            <div class="card-body">
              <h5 class="card-title">Nome de usuário: {{usuario.name}}  </h5>
              <p class="card-text" [(ngModel)]="usuarioDestino" name="usuarioDestino" ngDefaultControl>ID:{{usuario.id}}</p>
              <p class="card-text">{{usuario.username}}</p>
              <button class="btn btn-primary" data-toggle="modal" (click)="openDialog()">Pagar</button>
            </div>
          </div>
        </div>
      </div>
</div>