解决方案
思路
- 在组件的typesscript文件中，创建一个数组来存储每个按钮的信息
- 在模板中使用
*ngFor指令来循环渲染按钮列表 - 在按钮事件的处理函数中，每次点击按钮时向按钮数组添加一个新的按钮信息
实例
在组件的typescript代码中
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-project-demo',
templateUrl: './project-demo.component.html',
styleUrls: ['./project-demo.component.css']
})
export class ProjectDemoComponent implements OnInit {
buttons: { label: string }[] = [];
constructor() { }
ngOnInit(): void {
}
addNewButton() {
const newButtonLabel = `Button ${this.buttons.length + 1}`;
this.buttons.push({ label: newButtonLabel });
}
}
在html文件中
<button *ngFor="let button of buttons" [innerHTML]="button.label"></button>
<br>
<button (click)="addNewButton()">增加按钮</button>
效果图
代码截图
