Html 如何解决角网格中的可编辑索引问题

我在一个div中有两个ngFor，在同一个表中，一个ngFor数组保存一些现有数据，而第二个ngFor数组保存我要编辑的新数据，然后将数据推送到第一个数组中，该数组将默认/现有数据旧化

我的问题是，当我在第二个数组的一行上单击edit按钮时，数组one的同一索引/行也会被激活以进行编辑。我希望每个数组的索引都是独立的，也就是说，当我单击其中一个数组的索引上的“编辑”按钮时，只有索引应该被激活，我如何解决这个问题？下面是我的代码：

html

<div>
 <table >
   <tr>//.....</tr>
         // olds existing data, in which the data in the "newData" array with later land
   <tr *ngFor="list of existingData"; let i=index;>
      <td><button type="button" class="btn btn-danger"
          (click)=remove(i) [disabled]="disabled">
           <i class="glyphicon glyphicon-remove"></i>
          </button></td>
      <td><span>{{list.type}}</span><input type="test" *ngIf="enableEdit && enableEditIndex == i"></td>
      <td><button type="button"
        *ngIf="i != enableEditIndex || enableEditIndex == null"
        (click)="enableEditMethod($event, i )">
        <i class="glyphicon glyphicon-pencil"></i>
      </button></td>
   </tr>
               // here is the second tr
   <tr *ngFor="list1 of newData">
      <td><button type="button" class="btn btn-danger"
          (click)=remove(i)>
           <i class="glyphicon glyphicon-remove"></i>
          </button></td>
      <td><span>{{list1.type}}</span><input type="test" *ngIf="enableEdit && enableEditIndex == i"></td>
      <td><button type="button"
        *ngIf="i != enableEditIndex || enableEditIndex == null"
        (click)="enableEditMethod($event, i )">
        <i class="glyphicon glyphicon-pencil"></i>
      </button></td>
   </tr>
 </table>
</div>

// this is array from which data is push to "newData" array
<div>
 <table >
   <tr>//.....</tr>
   <tr *ngFor="allData of ArrayAllData">
      <td><button type="button" class="btn btn-secondary"
          (click)=addObj(i)>
           <i class="glyphicon glyphicon-plus"></i>
          </button></td>
      <td>{{allData.type}}</td>
   </tr>
 </table>
</div>

---

我在两个按钮上使用相同的功能。如果有问题，请提问

我很确定这是因为您还没有为第二个

*ngFor

初始化第二个索引变量

这样做可以解决问题：

<div>
  <table>
    <tr>//.....</tr>
    <tr *ngFor="list of existingData" ; let i=index;>
      <td><button type="button" class="btn btn-danger" (click)=remove(i) [disabled]="disabled">
           <i class="glyphicon glyphicon-remove"></i>
          </button></td>
      <td><span>{{list.type}}</span><input type="test" *ngIf="enableEdit && enableEditIndex == i"></td>
      <td><button type="button" *ngIf="i != enableEditIndex || enableEditIndex == null" (click)="enableEditMethod($event, i )">
        <i class="glyphicon glyphicon-pencil"></i>
      </button></td>
    </tr>

    <tr *ngFor="list1 of newData; let newIndex = index">
      <td><button type="button" class="btn btn-danger" (click)=remove(newIndex)>
           <i class="glyphicon glyphicon-remove"></i>
          </button></td>
      <td><span>{{list1.type}}</span><input type="test" *ngIf="enableEdit && enableEditIndex == newIndex"></td>
      <td><button type="button" *ngIf="newIndex != enableEditIndex || enableEditIndex == null" (click)="enableEditMethod($event, newIndex )">
        <i class="glyphicon glyphicon-pencil"></i>
      </button></td>
    </tr>
  </table>
</div>

// this is array from which data is push to "newData" array
<div>
  <table>
    <tr>//.....</tr>
    <tr *ngFor="allData of ArrayAllData">
      <td><button type="button" class="btn btn-secondary" (click)=addObj(newIndex)>
           <i class="glyphicon glyphicon-plus"></i>
          </button></td>
      <td>{{allData.type}}</td>
    </tr>
  </table>
</div>

//.....
{{list.type}
{{list1.type}
//这是一个数组，数据从该数组推送到“newData”数组
//.....
{{allData.type}

这是一个失误，我的代码中有索引，但仍然存在相同的问题您介意创建一个示例stackblitz来复制问题吗？我尝试了这种方法，但问题仍然存在。这里有一个问题，我可以在不更改ts文件任何内容的情况下更改html文件中的第二个索引名吗？当然可以。这是一个名为

newIndex

的变量，是动态创建的。谢谢，我用索引名创建了一个新函数，它可以工作。

<div>
  <table>
    <tr>//.....</tr>
    <tr *ngFor="list of existingData" ; let i=index;>
      <td><button type="button" class="btn btn-danger" (click)=remove(i) [disabled]="disabled">
           <i class="glyphicon glyphicon-remove"></i>
          </button></td>
      <td><span>{{list.type}}</span><input type="test" *ngIf="enableEdit && enableEditIndex == i"></td>
      <td><button type="button" *ngIf="i != enableEditIndex || enableEditIndex == null" (click)="enableEditMethod($event, i )">
        <i class="glyphicon glyphicon-pencil"></i>
      </button></td>
    </tr>

    <tr *ngFor="list1 of newData; let newIndex = index">
      <td><button type="button" class="btn btn-danger" (click)=remove(newIndex)>
           <i class="glyphicon glyphicon-remove"></i>
          </button></td>
      <td><span>{{list1.type}}</span><input type="test" *ngIf="enableEdit && enableEditIndex == newIndex"></td>
      <td><button type="button" *ngIf="newIndex != enableEditIndex || enableEditIndex == null" (click)="enableEditMethod($event, newIndex )">
        <i class="glyphicon glyphicon-pencil"></i>
      </button></td>
    </tr>
  </table>
</div>

// this is array from which data is push to "newData" array
<div>
  <table>
    <tr>//.....</tr>
    <tr *ngFor="allData of ArrayAllData">
      <td><button type="button" class="btn btn-secondary" (click)=addObj(newIndex)>
           <i class="glyphicon glyphicon-plus"></i>
          </button></td>
      <td>{{allData.type}}</td>
    </tr>
  </table>
</div>