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

一种解决方案是，每次在第二个数组中使用索引时，只需将索引移位+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>

Angular 5 ngFor让i = index + 3

2 个答案: