Angular 5 ng For let i = index + 3

Question

有没有办法将索引设置为从0开始？或修改它每次添加一些数字？

我有一个8的数组。我需要将它分成两组，但仍然将它留在一个集合中，因为它也是一个嵌套的反应形式，项目的顺序有意义。

因此，我只需要将它分成两组并将其嵌入材料设计的扩展面板中。

到目前为止这么好，但..

第二组从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

一种解决方案是每次在第二个数组中使用它时简单地将索引移动+3。我找不到其他解决方案。例如

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

与this post相关

Answer 2

最后，这就是我所做的

<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>