How to access an element of an object in angular 6

Question

How to access an element of an object in angular 6

Navigation

#1 by (1 votes)

1

I find myself trying to go through the following

 heros: any =[
    { 
      id: 200, 
      name: "Iron man" , 
      poderes: [ 
        {
          name: 'fuerza' , 
          nivel: 200, 
          description: [
            { 
              trabaja: 'DC', 
              jefe: [
                { name: 'Tor', edad: 25  }
              ]
            }
          ]
        }
      ]
    },


    { 
      id: 201, 
      name: "Hulk" , 
      poderes: [ {name: 'maldad' , nivel: 500 , 
        description: [{ trabaja: 'Marvel', 
          jefe: [{ name: 'Cap', edad: 105  }] 
        }]
      }]  
    }
  ]

From the component I do it in this other way

  <table>
  <tr>
     <th>Nombre</th>
     <th>Poder</th>
     <th>Trabaja</th>
  </tr>
  <tr *ngFor="let h of heros">
    <td>{{h.name}}</td>
    <td *ngFor="let a of h.poderes">
        {{a.name}}
    </td>
    <td *ngFor="let b of a.poderes.description">
        {{b.trabaja}}
    </td>
  </tr>
</table>

I have no problem in showing the name of the hero and his power, but when I want to access the name of where he works he shows me the following error

ERROR TypeError: Can not read property 'powers' of undefined

typescript angular angular5

asked by element 14.05.2018 в 10:14

source

1 answer

How can I implement the has-error class as it appears in the image by jquery Error in reading data type INT with JAVA Scanner [Resolved]

score 1 · Accepted Answer

You have become involved with the structure of your object (and I too, by the way): Let me show you ...

<tr *ngFor="let h of heros">
  <td>{{h.name}}</td>
  <td *ngFor="let a of h.poderes">
      {{a.name}}
  </td>

So far so good, but now the fault comes:

  <td *ngFor="let b of a.poderes.description">
    ...

The ngFor from before, which creates <td> tags bypassing the powers, does not nest to this other , so a no longer exists.

And you can not nest it as it is because you can not create <td> tags within others, you'll have to see how you want to represent a list of lists in your table (a list <ul> within a <td> , maybe? ):

<tr *ngFor="let h of heros">
<td>{{h.name}}</td>
<td *ngFor="let a of h.poderes">
    {{a.name}}
  <ul>
    <li *ngFor="let b of a.poderes.description">
      {{b.trabaja}}
    </li>
  <ul>
</td>