Angular: i can´t iterate in array inside array in a model-CodePudding

I have a table in which I load data from an array that comes to me through an API. So far so good. Some of them are array within array but in the view I´ve accessed these elements. The problem comes when I want to transfer this data to a modal. If the data comes in an array within an array in the modal it doesn´t show them to me in {{pais.currencie.name}}: core.mjs:6402 ERROR TypeError: Cannot read properties of undefined (reading 'name')

How should I do it?

Array array data

html view

<tr *ngFor="let pais of paises">
          <td>{{ pais.region }}</td>
          <td> {{ pais.name }}</td>
          <td>{{ pais.capital }}</td>
        
          <td *ngFor="let currencie of pais.currencies">{{ currencie.name }}</td> 
</tr>

html model

<ul >
                   <li >{{pais.name}}</li>
                   <li >{{pais.capital}}</li>
                   <li >{{pais.currencie.name}}</li>
                   <li >Población: {{pais.population}}</li>
                 </ul>

modal ts

@Input() pais: Paises | any;

CodePudding user response：

There is no currency property in your model but currencies. And from currencies, you can't access name directly as currencies is an array.

CodePudding user response：

Without knowing more details about how you're passing data between components, it's hard to diagnose where you issue is coming from. Update your post with a more complete view and we should be able to help.