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

似乎您想并排显示。您可以使用简单的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>

Answer 2

Kinda hack-y，但如果i % 2 === 1

，您可以跳过它

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

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

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

Answer 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

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

5 个答案: