CODEWITHSUNDEEP
angularangular2-directives
Staticshot
Staticshot

Reputation: 41

Angular2 , get specific element from Array of Arrays using NgFor

My goal is to get the array of objects of any index from the services array of arrays, and cycle through that array of objects through *ngFor

FILE.TS 

services:  Array<Servizio[]> = [];

FILE.HTML this is what I'd like to be able to do , but nothing shows in my list

  <li *ngFor="let servizio of services[0]"> 
                                <a href="#">{{servizio.name}}</a>
                            </li>

Upvotes: 1

Views: 1022

Answers (3)

Staticshot
Staticshot

Reputation: 41

I post the solution to my problem in case it's helpful to anyone :

<ul class="nav nav-list">
                                <span *ngFor="let servizio of services; let idx = index">
                                    <span *ngIf="idx  === 2">
                                        <li *ngFor="let ser of servizio">
                                            <a href="#">{{ser.name}}</a>

                                        </li>
                                    </span>
                                </span>
                            </ul>

Upvotes: 1

Chandru
Chandru

Reputation: 11184

Try like this :

my example :

template

<ul>
    <li *ngFor="let servizio of services[0]?.subMenuItem"> 
        <a href="#">{{servizio.name}}</a>
    </li>
</ul>

typescript :

services: Array<any[]> = [{
    "name": "xyz",
    "subMenuItem": [{
        "name": "abc"
    }, {
        "name": "cde"
    }],
    "icon": "home"
}, {
    "name": "pqr",
    "subMenuItem": [{
        "name": "abc"
    }, {
        "name": "cde"
    }],
    "icon": "home"
}];

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222522

ngFor works on an array, you are trying to use over first element of the array which is an object, you should do 

 <li *ngFor="let servizio of services"> 
      <a href="#">{{servizio.name}}</a>
 </li>

Upvotes: 1

Related Questions