Calling a subscribe function inside a async function does not bind the data?

Question

inside an alertcontroller handler, I want to receive some data from my API and bind the data in the HTML page. but does not until a click on the page. this is my code.

export class UserPage implements OnInit {
  dataPage: any;
  ngOnInit() {}
  constructor(userService: UserService) {}

  async alertFunction() {
    const alert = await this.alertController.create({
      header: 'Get data',
      message: 'Getting  data',
      buttons: [{
        text: 'get',
        handler: (blah) => {
          this.userService.getData().subscribe(r => {
            this.dataPage = r;
          });
        }
      }]
    });
    await alert.present();
  }

I'm displaying this dataPage in HTML by {{dataPage}} but it does not work.