Вызов функции подписки внутри асинхронной функции не связывает данные?

Question

внутри обработчика alertcontroller, я хочу получить некоторые данные из моего API и связать данные на HTML-странице. но не до нажатия на страницу. это мой код.

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();
  }

Я отображаю эту страницу данных в HTML с помощью {{dataPage}}, но она не работает.