Угловой 5 нг для let i = index + 3

Question

Есть ли способ установить индекс, чтобы начать не с 0? Или изменить его, чтобы каждый раз добавлять какое-то число?

У меня есть массив из 8. Мне нужно разделить его на две 4 группы, но все равно оставить в одной коллекции, поскольку это также вложенная реактивная форма и порядок элементов имеет значение.

Итак, мне нужно только разделить его на две группы и вложить в панель расширения материала-дизайна.

Пока все хорошо, но ..

Вторая группа начинается, естественно, отсчет с 0, потому что это итерация новой группы с его точки зрения. Возможно, я мог бы добавить trackBy или изменить idx путем распознавания данных в типе элементов, но это не элегантный способ.

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

updateEntity(event: MatAutocompleteSelectedEvent) {
  //this.idx - should start from 4 for the second part of mat-expansion-panel
  this.children.at(this.idx).patchValue({
    id: ...
  });
}

In the Parent

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      Buyer
    </mat-expansion-panel-header>
    <div *ngFor="let item of Entity | slice:0:4; let idx=index">
      <div class="row">
        <div class="col-sm">
          <entity-search [children]="form.controls.Entity" [child]="item" [idx]="idx">
          </entity-search>
        </div>
      </div>
    </div>
  </mat-expansion-panel>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      Seller
    </mat-expansion-panel-header>
    <div *ngFor="let item of isfEntity | slice:4:8; let idx=index">
      <div class="row">
        <div class="col-sm">
          <entity-search [children]="form.controls.Entity" [child]="item" [idx]="idx">
          </entity-search>
        </div>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>



In Entity Search:



<mat-form-field>
  <input type="text" placeholder="{{child.placeholder}}" required matInput formControlName="entityName" aria-label="Number" [formControl]="searchEntity" [matAutocomplete]="autoEntity">
  <mat-icon matSuffix>search</mat-icon>
  <mat-autocomplete #autoEntity="matAutocomplete" (optionSelected)="updateEntity($event)">
    <mat-option *ngFor="let item of searchEntityResult" [value]="item">
      {{ item.id + " " + item.entityName + " " + item.entitySecName }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Answer 1

В конце концов это то, что я сделал

<div *ngFor="let item of Entity | slice:4:8 ; let idx2=index">
  <p [hidden]="true">{{ idx2 + 4 }}</p>
  <div class="row">
    <div class="col-sm">
      <entity-search [children]="form.controls.isfEntity" [child]="item" [idx]="idx2">
      </entity-search>
    </div>
  </div>
</div>

Answer 2

Одним из решений было бы просто сдвинуть индекс на +3 каждый раз, когда вы используете его во втором массиве. Я не нашел другого решения. например,

....
<entity-search [children]="form.controls.Entity" [child]="item" [idx]="idx + 3">
</entity-search>
...

Относится к этой записи