如何根据列表实现Button？

Question

我想根据列表中元素的数量生成并显示尽可能多的按钮。有人可以告诉我如何实现吗？

目前，它像下面的代码一样被硬编码。但是通常我只有一个带有按钮1和2的列表。然后，我不需要按钮3和按钮4。

感谢您的帮助！

list=[button1, button2, button3, button4]

<div class="tabs_item_categories">
    <button class="tab_item_category" (click)="button1_active()">
         Button1
    </button>
    <button class="tab_item_category" (click)="button2_active()">
         Button2
    </button>
    <button class="tab_item_category"(click)="button3_active()">
         Button3
    </button>
    <button class="tab_item_category" (click)="button4_active()">
         Button4
    </button>
</div>

Answer 1

您可以使用*ngFor结构指令以角度进行迭代：

<div class="tabs_item_categories">
    <button class="tab_item_category" 
            *ngFor="let buttonConfig of buttonConfigs" 
            (click)="buttonConfig.onClick()">
        {{buttonConfig.label}}
    </button>
</div>

并在您的打字稿中：

buttonConfigs = [
    {
        label: 'Button 1',
        onClick: this.doSomethingOnButton1Click
    },
    ...
];

doSomethingOnButton1Click是组件中的lambda。