Angular 使用角度索引保存表中特定行的数据

我正在网格中显示来自服务的数据。 我正在网格中使用ngfor显示来自studentsInfo数组的数据。 状态为“Y”的记录将显示为存在。 状态为N的记录将带有一个按钮“单击显示”。 现在，我正在尝试使用索引为网格中的记录实现添加功能，只需单击按钮，就可以为具有按钮的特定记录添加功能。。 我使用formgroup:SearchForm提交值。 我只需要在添加时发送id和roll_no的值，因为服务只针对这两个字段设计。 现在，当我点击按钮时，得到的是空值。 请帮我实现这个功能

 
        <table style="width: 1000px; float: left">
          <tbody>
          <tr>
          <td>
                <div *ngIf="showdata == true">
                  <table>
                  
                    <thead>
                    
                      <tr>
                     
                        <th>  Id    </th>
                        <th>  name    </th>
                        <th>  Roll_no    </th>
                        <th>  section_name    </th>
                        <th>  Status    </th>
                    </tr>
                    
                    </thead>
                  </table>
                  
                  <form [formGroup]="SearchForm" >
                  <div class="col-md-8" style="padding-left: 0px">
                    <div class="contentss">
                      <table>
                        <tbody>
                          <ng-container *ngIf="studentsInfo| alphaFilter : alphaSrch: alphaColumns :'aa' as studentData; else noItems">
                          <tr *ngFor="let list of studentData ; let i = index">
                          
                            <td style="width: 100px">
                              <div style="margin-left: 50px">
                                <span>{{ i }}</span>
                              </div>
                            </td>
                            
                            <td>
                              <div>
                                <span formControlName="id" name="id" ngDefaultContro>{{ list.Id }}</span>
                              </div>
                            </td>

                            <td>
                              <div>
                                <span>{{ list.name }}</span>
                              </div>
                            </td>

                            <td>
                              <div>
                                <span formControlName="Roll_no" name="Roll_no">{{ list.Roll_no }}</span>
                              </div>
                            </td>

                            <td>
                              <div>
                                <span>{{ list.section_name }}</span>
                              </div>
                            </td>

                            <td *ngIf=" list.Status === 'Y'; else elseBlock">

                            <div>
                              <span>Present</span>
                            </div>
                            </td>

                          <ng-template #elseBlock>
                            <td >
                              <div>                               
                                <span>
                                  <input type="submit" value="Click to present" ((click)="onAcceptClick(i)">  
                                </span>
                              </div>
                            </td>
                          </ng-template>
 

                          </tr>
                          <ng-container *ngIf="!studentData.length && hide" [ngTemplateOutlet]="noItems"></ng-container>
                          </ng-container>
                          <ng-template #noItems>
                                <tr><td colspan="9" style="text-align: center;">No students Available!</td></tr>
                          </ng-template>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>

作为api主体的服务

{
    "id": "2",
    "roll_no": "21"
}

---

在这里使用表单不是正确的方法。代码中的基本内容是学生列表，表单设置为捕获一组值

您只需要一个按钮，通过该按钮，您需要从相应的行传递“id”和“roll_no”，并将其发送到组件上的方法

因此，去掉HTML中的form标记，以及TS文件中相应的formGroup定义

作为一个粗略的示例，请参见下面的示例代码：

<ng-template #elseBlock>
  <td >
    <div>                               
      <span>
        <button type="button" (click)="onAcceptClick(i, list.Id, list.Roll_no)">Click to present</button>  
      </span>
    </div>
  </td>
</ng-template>

因此，您的HTML将类似于：

table >
row1 > index 0 > id 100 > roll_no 121 > button(0, 100, 121)
row2 > index 1 > id 100 > roll_no 122 > button(1, 100, 122)
row3 > index 2 > id 100 > roll_no 122 > button(2, 100, 123)

---

谢谢你，先生，但是，事实上，这里所有学生的ID都是一样的。因为我从数据库中的另一个表中获取它。我只想发送特定索引的id和roll_no的值。如果您能用我的密码详细说明答案，我将不胜感激。因为我不熟悉编码。当你在模板中使用*ngFor循环时，它会显示所有学生的列表。将为表中的每一行显示该按钮（如果未显式隐藏）。因此，每个按钮将仅捕获相应学生的id和卷号。您可以在函数中传递所需的任意多个参数。我已经编辑了我的答案以通过索引。点击一个按钮就可以满足您的要求。按钮上的（单击）属性调用TS文件中的方法，您可以根据需要从HTML向TS方法传递任意多的参数。我已经编辑了我的初始回复，你可以查看按钮代码。是的，绝对可以。这就是您应该如何从TS文件中的OnAcctTeCKIT方法中接收的值创建对象。如果您的问题得到解决，那么请考虑将此标记为答案。这将关闭此线程。

onAcceptClick(index: number, id: string, roll_no: string) {
  if (!index || !id || !roll_no) {
    return alert('Please check');
  }
  // rest of your code with index value
}

table >
row1 > index 0 > id 100 > roll_no 121 > button(0, 100, 121)
row2 > index 1 > id 100 > roll_no 122 > button(1, 100, 122)
row3 > index 2 > id 100 > roll_no 122 > button(2, 100, 123)