Как реализовать кнопки в зависимости от списка?

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 - это лямбда в компоненте.