Расположение сетки для опции выбора

Question

Мне нужна сетка 4x2 для меню выбора HTML.

(Для понимания) Я получаю все параметры из массива:

массив:

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-я строка: (id 1-4) 2-я строка: (id 5-8)

Так что вы получите "grund" с идентификатором 1-4 в первом ряду и "grund" с идентификатором 5-8 во втором ряду и теперь все перечисленные выпадающие.

Может ли кто-нибудь помочь мне с этим?

Answer 1

Обязательно использовать только один массив ?. Я имею в виду, что вы можете разбить массив на 2 массива, чтобы вы могли работать с компонентом и управлять двумя элементами в компоненте и просматривать.

Другой способ, который вы можете попробовать, - это использовать индекс в ngFor , но вы должны использовать ng-template (поиск по нему):

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

вы обрабатываете индекс, сравнивая i == 4, и поэтому можете делать все, что захотите.

Это не решение, но дает вам идею разобраться с проблемой.