代码:
<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 的各种组合,但没有任何效果。如何将按钮分成行?
最佳答案
根据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>
关于css - 将切换按钮分成多行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63462982/