将切换按钮拆分为多行

Question

代码：

<mat-button-toggle-group value="0" (change)="toggleChangeQuestion($event)" name="selectQuestions" #group2="matButtonToggleGroup">
    <div *ngFor="let item of test; let i = index;">
        <mat-button-toggle *ngIf="!item.answer" value="{{i}}">{{i}}</mat-button-toggle>
    </div>
</mat-button-toggle-group>

这是 test.length 大于 5 时的样子：

期望的输出：

我尝试了各种显示、宽度和高度的组合 CSS 但没有任何效果。如何将按钮拆分成行？

Answer 1

根据this文章，你可以做一个小函数来将你的第一个数组拆分成相同长度的数组。

一旦你得到了数组的数组，你就可以像@Frost 在评论中所说的那样轻松地遍历数组中的数组。

<mat-button-toggle-group value="0" (change)="toggleChangeQuestion($event)" name="selectQuestions" #group2="matButtonToggleGroup">
  <div *ngFor="let array of test">
    <div *ngFor="let item of array; let i = index">
      <mat-button-toggle *ngIf="!item.answer" value="{{i}}">{{i}}</mat-button-toggle>
    </div>
  </div>
</mat-button-toggle-group>

如果您想保留一维数组，您应该迭代它并使用模数添加一个空白元素以转到下一行，如下所示

<ng-container *ngFor="let item of test; let i = index">
  <div style="display:block" *ngIf="i%5 == 0">
  </div>
  {{i}}
</ng-container>

将切换按钮拆分为多行

Split the toggle buttons into multiple rows

css

togglebutton

angular-material

material-ui

angular