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

Question

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

从可能的选项中，我尝试使用mat-grid-list，因为文档说它会自动计算它将有多少行。但是，这不起作用。

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

Answer 1

好的，不确定您是否可以使用 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 了解更多信息。

Answer 2

你可以试试下面的代码：

<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 列。