超过 1 行的角度切换按钮

Question

我想实现一些角度切换按钮。我不知道有多少，这取决于我的数据库数据。

按钮显示在侧边栏上，这意味着一行中最多只能呈现 3 个按钮。

有没有办法在例如之后换行3个按钮？不创建新的 mat-button-toggle-group ？

这是我的代码：

      <mat-button-toggle-group multiple name="categories_1" ngModel aria-label="Kategorien">
        <mat-button-toggle value="LOREM1_1" checked>Value1</mat-button-toggle>
        <mat-button-toggle value="LOREM1_2" checked>Value2</mat-button-toggle>
        <mat-button-toggle value="LOREM1_3" checked>Value3</mat-button-toggle>
        <mat-button-toggle value="LOREM2_1" checked>Value4</mat-button-toggle>
      </mat-button-toggle-group>

感谢您的帮助！

Answer 1

您可以为此使用flex。

<mat-button-toggle-group fxLayout="row" multiple name="categories_1" ngModel aria-label="Kategorien">
    <mat-button-toggle fxFlex="33%" value="LOREM1_1" checked>Value1</mat-button-toggle>
    <mat-button-toggle fxFlex="33%" value="LOREM1_2" checked>Value2</mat-button-toggle>
    <mat-button-toggle fxFlex="33%" value="LOREM1_3" checked>Value3</mat-button-toggle>
    <mat-button-toggle fxFlex="33%" value="LOREM2_1" checked>Value4</mat-button-toggle>
    ...
</mat-button-toggle-group>

或者您也可以使用*ngFor 循环，以防项目数量未知，并且仍然使用 33% 的弹性宽度来获得每行 3 个项目。您可以调整 width% 以在一行中获得更多或更少的项目。