page. After clicking, a pop-up window pops up. There is no button pop-up window

defines a countdown, which works normally.
but in the pop-up window, this number does not change
code:
export class InteglePage {
public flag = true;
public num = 5;
constructor (public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, public actionSheetCtrl: ActionSheetController) {
}

/ / countdown
shi () {

var countDown = document.getElementById("countDown");
console.log(countDown);
var timer = setInterval(() => {
  --this.num
  console.log(this.num);
  if (this.num <= 0) {
    clearInterval(timer)
  }
}, 1000);

}

`
agree () {

   this.shi();
    const confirm = this.alertCtrl.create({
          title: `<i class="icon iconfont"></i>`,
          message: `
              
              <h3></h3>
              
<span id="countDown">${this.num}</span>
              
          `,
          cssClass: "clickAgree",
        
        })
        confirm.present();

        setTimeout((data) => {
          confirm.dismiss(() => {
            console.log("dismissed")

          })
        }, 5000);
 }

`