如何在使用固定结构时在 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

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

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

How to increment and update index value by 2 in ngFor while using a fixed structure

javascript

arrays

typescript

angular2-template

angular