Angular nested forloop in html-CodePudding

I Had to make a nested forloop in my own preferred language and i chose javascript, I chose the Angular frame work for this, I tried a nested forloop in Angular using the PokeAPI, nothing seems off but it still doesn't work

  <div  *ngFor="let pokemon of pokemons">
    <div >
      #{{pokemon.id}}
    </div>
    <div >
      <h4 >{{pokemon.name}}</h4>
      <div >
        <img src="{{pokemon.sprites.front_default}}" alt="">
        <img src="{{pokemon.sprites.front_shiny}}" alt="">
      </div>
      <div >
        <div >
          <h2  id="headingOne">
            <button #movesButton (click)="moves.classList.toggle('collapse'); movesButton.classList.toggle('collapsed')"  type="button">
              {{pokemon.name}}'s moves
            </button>
          </h2>
          <div #moves >
            <div >
              <p *ngFor="let move of pokemon.moves; let i = index">{{i}}: {{move.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>```

I don't get an error either just a bunch of empty paragraphs


Here are the images of the API results and the empty paragraphs


  [1]: https://i.stack.imgur.com/bZHco.png
  [2]: https://i.stack.imgur.com/EZXgy.png

CodePudding user response：

It looks like you missed a key out there, as per the API response and your for loop you wrote.

you can obtain the move name by writing:

<p *ngFor="let move of pokemon.moves; let i = index">{{i}}: {{move.move.name}}</p>

moves is an array contains an object called move and you named your variable in the loop the same name

so you should have

move.move.name

CodePudding user response：

As per your screenshot, I think it should be like below

<p *ngFor="let move of pokemon.moves; let i = index">{{i}}: {{move.move.name}}</p>

Can you try using this?