Angular 5 ngFor let i=index+3答案

【问题标题】：Angular 5 ngFor let i=index+3Angular 5 ngFor let i=index+3
【发布时间】：2019-02-08 12:12:09
【问题描述】：

有没有办法将索引设置为不从 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>

【问题讨论】：

stackoverflow.com/questions/39057119/… 可能重复

标签： angular5 angular2-forms ngfor angular-reactive-forms

【解决方案1】：

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

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

与this post相关

【讨论】：

【解决方案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>

【讨论】：