I want to render the object exple using *ngFor directive but i have got the error mentioned erlier. the code is as follow:

this.exple=[
      // first user 
      { 
        firstName: 'Msaddak',
        lastName: 'Rouabeh',
        completeAdress: [
          {
            city: 'Gafsa',
            neighborhood: 'Cité Hached Lalla',
          },
          {
            city: 'Monastir',
            neighborhood: 'Skanes',
          }],
        
      },
      // Second user
      {
        firstName: 'Houssem',
        lastName: 'Ilahi',
        completeAdress: [
          {
            city: 'Tunis',
            neighborhood: 'Bardoo',
          },
          {
            city: 'Nabeul',
            neighborhood: 'Mrezka',
          }],
            
      }


    ] 

The command used for rendering:

<div *ngFor="let item of exple.completeAdress"> {{item.city}} </div>

{{item.city}} didn't work either.

CodePudding user response：

exple is an array. You cannot access completeAdress of the array, but rather of each item of the array.

Instead you should do

<div *ngFor="let item of exple">
    <div *ngFor="let addressItem of item.completeAdress"> {{addressItem.city}} </div>
</div

CodePudding user response：

Your trying to access the array inside an array in one step.

Below you can see that while iterating over the users you then can iterate over the addresses

<ul>
  <li *ngFor="let user of exple"> 
    {{user.firstName}}
    <ul>
      <li *ngFor="let address of user.completeAdress">
        {{address.city}}
      </li>
    </ul>
  </li>
</ul>

If you want to only show the addresses of 1 user you have to select that user by the index:

<ul>
  <li *ngFor="let address of exple[0].completeAdress">
    {{ address.city }}
  </li>
</ul>

This will show the cities of the 1st user.