使用* ngFor在HTML中创建行/项目的问题

Question

我正在使用两个* ngFor和数组来创建一行文本和一行进度条。我想要这样的东西：

What i want

但是我正在得到这个：

What i am getting

我的代码：

HTML：

   <div *ngFor="let eachMove of this.pokemonGen1[this.pokemonNumber].moves">
       <ion-row>
        <ion-col><p>eachMove</p></ion-col>
        <ion-col><p> value 2</p></ion-col>
       </ion-row>
        <ion-row *ngFor="let hp of  this.pokemonHPbyMoveArray">
          <ion-progress-bar  value="{{hp}}"></ion-progress-bar>
        </ion-row>
      </div>

我有两个阵列，一个用于口袋妖怪移动，每个用于口袋妖怪hp。

我尝试了很多方法使其正常工作，但始终会创建6个进度条。

是否可以同时制作一个* ngFor和另一个* ngFor？

我知道创建了6个小节，因为它们仍位于第一个* ngFor的第一个数组参数上。

Answer 1

您应该将html更改为：-

<div *ngFor="let eachMove of this.pokemonGen1[this.pokemonNumber].moves;let i=index">
       <ion-row>
        <ion-col><p>eachMove</p></ion-col>
        <ion-col><p> value 2</p></ion-col>
       </ion-row>
        <ion-row>
          <ion-progress-bar  [value]="pokemonHPbyMoveArray[i]"></ion-progress-bar>
        </ion-row>
      </div>