在使用固定结构时，如何在ngFor中增加和更新索引值2

Question

我有一个固定的模板结构，连续打印两行，如下所示，我需要使用ngFor指令迭代：

 <div class="row" *ngFor="let item of cityCodes; let i = index">
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-1">

      </div>
      <div class="img-text">
        {{cityCodes[i].value}}
      </div>
    </div>
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-2">

      </div>
      <div class="img-text">
        {{cityCodes[i+1].value}}
      </div>
    </div>

  </div>

正如您在上面的代码中看到的，我使用的是cityCodes json，如下所示：

  cityCodes=[{12:'patna'},{23:'jaipur'},{21:'Baliya'},{23:'Canugh'}]

由于我有一个固定的结构，如连续两列，我使用cityCodes [i]和cityCodes [i + 1]并排打印图像。

由于我已经在第一行中使用了[i + 1]个项目，因此ngFor将再次从下一行中的相同项目开始。如何在这里更新索引。

Answer 1

恕我直言，与此处的其他答案相反，我认为以下应该足够了。

<div class="row" ; let i = index">
  <div class="col-6" *ngFor="let item of cityCodes" (click)="cityClick(item.key)">
    <div class="img img-1">
    </div>
    <div class="img-text">
      {{item.value}}
    </div>
  </div>
</div>

或者只是包裹在ng-template

<div class="row" ; let i = index">
  <ng-template ngFor let-item [ngForOf]="cityCodes">
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-1">
      </div>
      <div class="img-text">
        {{item.value}}
      </div>
    </div>
  </ng-template>
</div>

Answer 2

看来你想并排展示。你可以使用简单的css属性qazxsw poi来做到这一点

你基本上需要两个数组，一个将包含在主数组中占据偶数索引的所有元素，另一个包含占据奇数索引的所有元素。

然后分别循环遍历它们并使用css属性并排显示

columns

.ulClass {
  columns: 2
}

Answer 3

有点hack-y但你可以跳过它如果

<ul class='ulClass'>

  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>



</ul>

i % 2 === 1

Answer 4

只需用div包装你的代码，并按照下面的条件做一些事情。您可能想在ts文件中创建isOdd方法。

<div class="row" *ngFor="let item of cityCodes; let i = index" *ngIf="i % 2 === 0">

Answer 5

<div class="row" *ngFor="let item of cityCodes; let i = index">
   <div *ngIf="isOdd(i)">
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-1">

      </div>
      <div class="img-text">
        {{cityCodes[i].value}}
      </div>
    </div>
    <div class="col-6" (click)="cityClick(item.key)">
      <div class="img img-2">

      </div>
      <div class="img-text">
        {{cityCodes[i+1].value}}
      </div>
    </div>
  </div>
  </div>

请参阅stackblitz代码

<div class="row" *ngFor="let item of cityCodes; index as i; first as isFirst; even as isEven">
<ng-container *ngIf="isEven || isFirst">
  <div class="col-6 " (click)="cityClick(item.key)">
  <div class="border border-primary">

  </div>
  <div class="border border-primary">
    {{i}}
  </div>
</div>
<div class="col-6" (click)="cityClick(item.key)" >
  <div class="border border-primary">

  </div>
  <div class="border border-primary">
    {{i+1}}
  </div>
</div>
</ng-container>