Question

我想要HTML选择选项菜单的4x2网格。

（为便于理解），我从数组中获得了所有选项：

数组：

data = [{"id":1,"grund":"fehlendes Material"},
          {"id":2,"grund":"gebrochenes Werkzeug"},
          {"id":3,"grund":"verschlissenes Werkzeug"},
          {"id":4,"grund":"defekte Maschine/Magazin"},
          {"id":5,"grund":"fehlende Betriebsmittel"},
          {"id":6,"grund":"fehlendes Personal"},
          {"id":7,"grund":"Zeichnungsproblem"},
          {"id":8,"grund":"fehlendes Programm"}];

html用于获取“ grund”：

 <div [formGroup]="form" class="gruende">
    <select [(ngModel)]="grund" formControlName="grund" size="{{size}}">
      <option *ngFor="let item of data">{{item.grund}}</option> 
   </select>
 </div>

我想要这样的Grid 4x2

第一行：（编号1-4）第二行：（id 5-8）

因此，您在第一行中获得ID 1-4的“ grund”，在第二行中获得ID 5-8的“ grund”，现在所有列出的下拉列表。

有人可以帮我吗？

Answer 1

是否必须仅使用一个数组？我的意思是，您可以将数组拆分为2个数组，以便可以围绕组件工作并管理组件和“视图”中的2个元素。

另一种方法，您可以尝试在ngFor中使用索引计数，但是必须使用ng-template（搜索它）：

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

您可以通过比较i == 4来处理索引，因此您可以做任何想做的事。

这不是解决方案，但是给您解决问题的想法。

选择选项的网格布局

1 个答案: