Блог

У меня есть таблица студентов, которую я получаю из базы данных, и я пытаюсь создать форму «ОТПРАВИТЬ» для каждого студента, если он отсутствует, которая отправляется в таблицу «отсутствия» в моей базе данных, точно так же, как это :

проблема в том, что когда я выбираю переключатель для «Отсутствует», все переключатели выбираются, и когда я пишу ввод в «комментарий учителя», он записывается во все входные данные таблицы,

Как я могу это исправить, чтобы каждая строка моей таблицы имела свою собственную функцию post

это мой компонент.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>
 

Это невозможно, чтобы это было

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

у вас много элементов с одинаковым именем и одинаковым идентификатором