angular - 在多列中动态显示 Angular 6 Material 单选按钮

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了解更多信息。