每次单击按钮时添加新按钮，并在角度6中添加具有新颜色的按钮

Question

我正在尝试创建一个页面，用户可以在每次点击事件时创建新按钮。我想要新的按钮和新的颜色每当点击事件火。请帮助在angular 6 中完成此任务

Answer 1

我创建了一个stackblitz，向您展示如何以我认为是最佳实践的方式解决问题。

https://stackblitz.com/edit/angular-w2zmkh

Answer 2

保留一个用于跟踪按钮的数组。最初，它将只有一个条目，该条目将通过数组的迭代显示。单击按钮后，将一个新元素添加到数组中，数组将动态生成一个新按钮。

应用程序组件.ts：

// Array of buttons
buttons : {
id    : number,
color : string
}[] = [{ id : 0, color : 'grey' }];
// Function to add new button
addButton(){
this.buttons.push({
id    : this.buttons.length,
color : '#'+(Math.random()*0xFFFFFF<<0).toString(16)
})
}

app.component.html：

<div *ngFor="let button of buttons">
<button [ngStyle]="{'background-color': button.color}" (click)="addButton()">Add New</button>
</div>

演示：https://stackblitz.com/edit/angular-jszwmk