如何在另一个ngFor表中正确编写NgModel表单

Question

我有一个从数据库中获得的学生表，如果每个学生缺席，我会尝试为他制作一个'POST‘表单，并将其发送到我数据库中的'absences’表中，就像这样：

​

问题是，当我选择“缺席”的单选按钮时，所有的单选按钮都会被选中，而当我在“教师评论”中写一个输入时，它会被写到表格的所有输入中。

我如何解决这个问题，使我的表的每一行都有自己的post函数

这是我的component.ts

contacts: [];
  upadateform = {
    'dc_docjustificatif': File = null,
    'dc_student': '',
    'dc_status': null,
    'dc_description':''
    
  }

  constructor(private contactsService : contactsService,
    private absenceService : absenceService) { }

  ngOnInit(): void {
    
    this.contactsService.fetchAll()
      .subscribe(
        res => this.contacts = res,
        
      )
  }
  addAbsence(){
    this.absenceService.postAbsence(this.upadateform)
    .subscribe(
      res => {
        console.log(res)
      },
      err => {
        console.log(err);
        
        
      }
    )     
  };

这是我的component.html

<div class="card" *ngFor="let contact of contacts ; let i = index">
    <div class="card-header" id="headingOne"  *ngIf="contact._dc_class_value==='81745753-a826-ec11-b6e5-002248131c68'">
      <form #absenceform="ngForm" enctype="multipart/form-data" >
        <div class="row ">
          <!--Execution-->
          <div class="col-1 mt-2">
            {{i-1}}
          
        </div> 
          <div   class="col-3 mt-2"> 
            {{contact.fullname}}
          </div>
          
           
        <div class="col-2 mt-2">
          CL1_Pro1
        
        </div>
        <div class="col-1  mt-2  ml-3">
          <input [(ngModel)]="upadateform.dc_status" [value]="100000000"  class="form-check-input" type="radio" name="exampleRadios{{i}}" id="exampleRadios1" value="option1" >
        </div>
        <div class="col-1 mt-2 ml-3">

          <input class="form-check-input" type="radio" name="exampleRadios{{i}}" id="exampleRadios2" value="option2" >
        
        </div>
        <div class="col-1 mt-2 ml-3">
          <input [(ngModel)]="upadateform.dc_status"  [value]="100000002" class="form-check-input" type="radio" name="exampleRadios{{i}}" id="exampleRadios3" value="option3" >
        
        </div>
        <div class="col-2 mt-2">
        <input name="Name{{ i }}" id="Name{{ i }}"
        class="input-group input-group-sm" width="50%" [(ngModel)]="upadateform.dc_description">
        </div>
        <button (click)="addAbsence()" class="mt-2 btn btn-danger shape float-right">
          Save
          </button>
          
        </div>
      </form>
      
    </div>
  </div>

Answer 1

这是不可能的

name="exampleRadios{{i}}" id="exampleRadios1"

您有许多具有相同名称和相同id的元素