如何根据列表实现按钮？答案

【问题标题】：How to implement Buttons depending on a list?如何根据列表实现按钮？
【发布时间】：2019-02-28 15:53:27
【问题描述】：

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

目前它是硬编码的，如下面的代码。但通常我只有一个只有按钮 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>

【问题讨论】：

使用*ngFor这里是文档angular.io/guide/displaying-data
您可以使用遍历列表并相应地创建附加按钮来执行此操作。一个问题是你想在点击时调用函数，你需要调用一个通用方法并使用开关来相应地调用函数。

标签： html angular ionic-framework button ionic3

【解决方案1】：

您在 Angular 中使用 *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。

【讨论】：