Parse error during while handling double dimensional array in html template

Ionic Framework ionic-v3
1

Hi all ,

I am getting following error , while trying to handle double dimensional array in ionic2
Error is as follows

Error: Uncaught (in promise): Error: Template parse errors:
**Parser Error: Bindings cannot contain assignments at column 20 in [**
      {{
          gift1 = giftRecord[0];
          gift2 = giftRecord[1];
      }}
**      ] in ng:///RedeemModule/Redeem.html@18:49 ("**

  <ion-grid>
    <ion-row *ngFor="let giftRecord of giftAll" >[ERROR ->]
      {{
          gift1 = giftRecord[0];
          gift2 = giftRecord[1];
"): ng:///RedeemModule/Redeem.html@18:49

My html template is as follows

<ion-grid>
    <ion-row *ngFor="let giftRecord of giftAll" >
      {{
          gift1 = giftRecord[0];
          gift2 = giftRecord[1];
      }}
      <ion-col col-3>
        <img src=
        </ion-col>
         <ion-col col-3>
        </ion-col>
    </ion-row>
  </ion-grid>

I am able to print 2 dimensional file in my ts file though with same syntax

for ( let newgift of this.giftsAll)
       {
          rowNo += 1;
          let gift1 = newgift[0] ;
          let gift2 = newgift[1];
          console.log( "row : "+rowNo );
          if (gift1 != null)
          {
            console.log(gift1.giftCode);
          }
          if (gift2 != null)
          {
            console.log(gift2.giftCode);
          }
       }

Please suggest.

2

The error seems pretty clear. You can’t assign things in {} interpolation. What are you really trying to do? Are you always only wanting the first two elements of each giftRecord?

3

yes . giftAll is 2 dimensional array with 2 columns and 3 rows . First column object is gift1 and second colum object is is gift2 .

Trying to write template like below :

 <ion-grid>
    <ion-row *ngFor="let giftRecord of giftAll" >
      {{
          gift1 = giftRecord[0];
          gift2 = giftRecord[1];
      }}
      <ion-col col-3>
       <img src="{{gift1.imageName}}" >
        </ion-col>
         <ion-col col-3>
         <img src="{{gift2.imageName}}" >
        </ion-col>
    </ion-row>
  </ion-grid>

I will try this way

 <ion-grid>
    <ion-row *ngFor="let giftRecord of giftAll" >
    
      <ion-col col-3>
       <img src="{{giftRecord[0].imageName}}" >
        </ion-col>
         <ion-col col-3>
         <img src="{{giftRecord[1].imageName}}" >
        </ion-col>
    </ion-row>
  </ion-grid>
4

Final code which worked

<ion-grid>
    <ion-row *ngFor="let giftRecord of giftsAll" >
    
      <ion-col *ngFor="let giftCol of giftRecord" col-3>
     <p> {{ giftCol.giftCode }} </p>
        </ion-col>
    
    </ion-row>
  </ion-grid>