使用 angular 中的索引保存 table 的特定行的数据

Question

我正在网格中显示来自服务的数据。我在网格中使用 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| Filter : Srch: Columns :'abc' 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>

studentsInfo: any = [];


 id: number;
 studentList(id){
    const obj = {
      ID: this.selected
    };
  this.inceSrvc.postmethod('students/get',obj).subscribe((res:any)=>{
   if (res.status === 200) {
     const students = res.response;
     if (students) {
       this.studentsInfo = res.response;
     }
}
 });
}
 

  SearchForm: FormGroup;
    public globalResponse: any = [];

    onAcceptClick(){
      if (this.SearchForm.invalid) {
        alert('Please check the details');
       return;
      }

      const obj = {
        id : this.SearchForm.value.id,
        roll_no : this.SearchForm.value.roll_no,
      }
     this.inceSrvc.postmethod('students',this.SearchForm.value).subscribe((response:any)=>{
        this.globalResponse = response;
        if(this.globalResponse.status === 200)
        {
          alert('Record updated');       
        }
   });
  }

}

作为 api、

主体的服务

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

Answer 1

这里使用表格不是正确的方法。您在代码中实质上拥有的是一个学生列表，并且您的表单设置为捕获一组值。

您只需要一个按钮，您需要通过该按钮传递相应行中的“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>

在您的 TS 文件上：

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

所以你的 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)

使用 angular 中的索引保存 table 的特定行的数据

save data of a particular row of a table using index in angular

grid

angular