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

Posted 2023-02-22

【中文标题】如何在使用固定结构时在 ngFor 中将索引值增加和更新 2

【英文标题】：How to increment and update index value by 2 in ngFor while using a fixed structure

【发布时间】：2019-07-16 05:11:55

【问题描述】：

我有一个固定的模板结构，可以在一行中只打印两个项目，如下所示，我需要使用 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 再次从下一行中的相同项目开始。如何在此处更新索引。

【问题讨论】：

有什么问题？有错误吗？

ngFor with index as value in attribute 的副本。此外，只需在第一个内部 div 上使用 ngFor 并保持类相同。它们最终将形成 2 列结构。

【参考方案1】：

您似乎想并排显示。你可以使用简单的css属性columns

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

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

.ulClass 
  columns: 2

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

【参考方案2】：

有点 hack-y，但如果 i % 2 === 1 可以跳过它

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

【讨论】：

如何在div中使用索引(i)

【参考方案3】：

只需用 div 包装您的代码，并有条件地执行如下操作。您可能想在 ts 文件中创建 isOdd 方法。

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

【参考方案4】：

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

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

【参考方案5】：

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

参考 stackblitz 代码here

【讨论】：

如何在其他元素的div中使用索引（i）