如何在离子表单上动态创建按钮

<ion-buttons>
  <!-- 动态生成的按钮将被添加到这里 -->
</ion-buttons>

import { Component } from '@angular/core';

@Component({
  selector: 'app-page',
  templateUrl: 'page.html',
  styleUrls: ['page.scss'],
})
export class Page {

  constructor() {}

  createButton() {
    // 创建一个新的按钮元素
    const button = document.createElement('ion-button');
    button.innerText = '动态按钮';
    // 添加按钮点击事件监听器
    button.addEventListener('click', this.buttonClicked);

    // 将按钮添加到按钮容器中
    const buttonContainer = document.querySelector('ion-buttons');
    buttonContainer.appendChild(button);
  }

  buttonClicked() {
    console.log('按钮被点击了！');
  }

}

<ion-button (click)="createButton()">生成按钮</ion-button>
<ion-buttons>
  <!-- 动态生成的按钮将被添加到这里 -->
</ion-buttons>