将切换按钮分成多行

问题描述

代码：

<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时的外观：

ZOOM SDK Integration

所需的输出：

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

解决方法

根据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>

如果要保留1维数组，则应对其进行迭代，并使用modulo添加空白元素，如下所示转到下一行

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