CODEWITHSUNDEEP
angular
GMB
GMB

Reputation: 41

Not able to interpolate inside *ngFor

I'm trying to interpolate inside *ngFor .Each tag consist of *ngIf.The value of Particular_id I get after Intepolation is 10,20. So if=Particular_id = 10 it should print Base Module. Its not printing anything.What have I done wrong? My json format 

{
    "Item_description" : [{
        "quantity" :[10,20,30,40],
        "particular" : [20,30,40],
        "description" : ["10","20","30"]
}]
}

Data is in this format : [10,20,30] in json .

How to manipulate data and make it 

["id":10,"id":20,"id":30]

Code :

.ts :

purchase_id=[];
for(var i=0;i< data.Item_description.length;i++) {
this.particular_id[i] = data.Item_description[i].particular_id;
 //this.particular_id["id"+i] is this possible?
}

.html

 <td *ngFor="let Particular_id  of particular_id">
            <ul>
              <li>{{Particular_id}}</li>
           <li *ngIf="Particular_id === 10">  Base Module</li>
           <li *ngIf="Particular_id === 20"> Advance sta </li>
           <li *ngIf="Particular_id === 30">  Custom Tabl</li> 
           </ul>
    </td>

Upvotes: 0

Views: 454

Answers (4)

Vaishnavi Baliga
Vaishnavi Baliga

Reputation: 26

<p>{{particular_id}}</p>


   <li *ngIf="Particular_id === 10">  Base Module</li>
   <li *ngIf="Particular_id === 20"> Advance sta </li>
   <li *ngIf="Particular_id === 30">  Custom Tabl</li> 
   </ul>

Is there data inside particular_id. Try printing it outside *ngFor. Can you please add the .ts file as well? It would be easier to solve the issue.

Upvotes: 0

KShewengger
KShewengger

Reputation: 8269

You can try this method on transforming your data from [10, 20, 30] to an Array of Objects [{"id":10},{"id":20}, {"id":30}]

const data = [10, 20, 30];

this.list = data.map(id => ({ id }));  // [{"id":10},{"id":20}, {"id":30}];

console.log(transform[0].id);     // 10 
console.log(transform[1].id);     // 20
console.log(transform[2].id);     // 30

NOTE: You can't have a result of ["id":10,"id":20,"id":30] since it would trigger an error of:

"Uncaught SyntaxError: Unexpected token :"

You can only store strings, numbers, boolean and objects in an array.

There's no valid type for ['id': 10] without {} inside.

So on your template you can iterate them through:

1.) NgFor and NgIf

<td *ngFor="let item of list">
  <ul>
     <li>{{ item.id }}</li>
     <li *ngIf="item.id === 10">  Base Module</li>
     <li *ngIf="item.id === 20"> Advance sta </li>
     <li *ngIf="item.id === 30">  Custom Tabl</li> 
  </ul>
</td>

2.) NgFor and NgSwitch

<div *ngFor="let item of list">

   <div [ngSwitch]="item.id">
     <div *ngSwitchCase="10">I am 10</div>
     <div *ngSwitchCase="20">I am 20</div>
     <div *ngSwitchCase="30">I am 30</div>
   </div>
</div>

Had created a StackBlitz Demo for your reference

Upvotes: 1

Indrakumara
Indrakumara

Reputation: 1645

try this 

'id:'+array1.toString().split (',').join( ',id:')

Upvotes: 0

DD Developer
DD Developer

Reputation: 3

Try the below:

<div *ngFor = "let Particular_id of fetchData">
  <ul>
          <li>{{Particular_id.id}}
       <li *ngIf="Particular_id.id == 10">  Base Module</li>
       <li *ngIf="Particular_id.id == 20"> Advance sta </li>
       <li *ngIf="Particular_id.id == 30">  Custom Tabl</li> 
       </ul>
</div>

Upvotes: 0

Related Questions