Как увеличить и обновить значение индекса на 2 в ngFor при использовании фиксированной структуры

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

См. Код стекаблика здесь

Answer 2

ИМХО, вопреки другим ответам здесь, я думаю, что следующего должно быть достаточно:

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

Вроде хак-у, но вы можете пропустить это, если i % 2 === 1

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

Answer 4

Просто оберните ваш код с помощью div и делайте вещи условно, как показано ниже.Вы можете захотеть создать метод isOdd в вашем файле ts.

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

Кажется, вы хотите отобразить рядом.Вы можете сделать это с помощью простого свойства 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>