多列动态显示角度6个材质单选按钮

Question

如何在多列上显示动态Angular Material单选按钮，如下图所示：

从可能的选项中，我尝试使用For i = Lbound(code,1) To UBound(code,1) ，因为文档说它会自动计算将拥有多少行。但是，这不起作用。

mat-grid-list

Answer 1

您可以尝试以下代码：

<mat-radio-group>
 <mat-grid-list cols="3">
  <mat-grid-tile *ngFor="let radioBut of objectlist"
   [colspan]="1">
   <mat-radio-button [value]="radioBut">
    {{radioBut.label}}
   </mat-radio-button>
 </mat-grid-tile>
</mat-grid-list>

您将有4列。

Answer 2

好吧，不确定是否可以使用Angular Material网格系统来实现，但是可以将CSS与<ul>和<li>元素一起使用：

<ul>
  <li *ngFor="let radioBut of objectlist">{{radioBut.label}}</li>
</ul>

在您的CSS文件中：

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 4em;
}

有关更多信息，请参见this StackOverflow answer。