Отображение угловых 6 радиокнопок материала динамически в нескольких столбцах

Question

Как можно отображать переключатели динамического углового материала в нескольких столбцах, как показано на следующем рисунке:

Из возможных опций я попытался использовать 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

Хорошо, не уверен, что вы можете достичь этого с помощью системы координат Углового материала, но вы можете использовать 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;
}

См. этот ответ StackOverflow для получения дополнительной информации.

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 столбца.