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

admin管理员组

文章数量:1389779

I have a fixed template structure to print only two items in a row as below and i need to iterate using ngFor directive:

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

As you can see in the above code I am using cityCodes json as below:

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

Since I have a fixed structure like two columns in a row, i am using cityCodes[i] and cityCodes[i+1] to print the images side by side.

As I have already used [i+1]th item in the first row, ngFor is again starting with same item in the next row. How to update the index here.

I have a fixed template structure to print only two items in a row as below and i need to iterate using ngFor directive:

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

As you can see in the above code I am using cityCodes json as below:

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

Since I have a fixed structure like two columns in a row, i am using cityCodes[i] and cityCodes[i+1] to print the images side by side.

As I have already used [i+1]th item in the first row, ngFor is again starting with same item in the next row. How to update the index here.

• javascript
• arrays
• angular
• typescript
• angular2-template

Share Improve this question Follow edited Feb 22, 2019 at 8:26 Onera asked Feb 22, 2019 at 6:43 OneraOnera 71744 gold badges1616 silver badges3636 bronze badges 2

• What's the problem? Is there an error? – molamk Commented Feb 22, 2019 at 6:45
• Duplicate of ngFor with index as value in attribute. Also, just use ngFor on the first internal div and keep classes same. They will end up in a 2 column structure. – Pushkar Adhikari Commented Feb 22, 2019 at 6:48

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

IMHO, contrary to other answers here, I think following should be enough.

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

or to just wrap in an 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>

It seems you want to display side by side. You can do it usinf simple css property columns

You will basically need two array , one will contain all the elements occupying even index in main array and another all the elements which are occupying odd index.

Then loop over each of them separately and use css property to display side by side

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

Just wrap your code with a div and do things conditionally like below. You may want to create isOdd method in your ts file.

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

Kinda hack-y but you could skip it if the i % 2 === 1

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

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

Refer stackblitz code here

本文标签：