В Angular как загрузить значение переключателя, когда мы нажимаем на опцию Edit

Question

In Angular Как загрузить значение переключателя, когда я нажимаю кнопку редактирования формы.

Это мой пользовательский интерфейс.

когда я нажимаю сохранить, данные вставляются в таблицу данных.Но когда я нажимаю кнопку редактирования, форма не загружается со значениями переключателя, а когда я нажимаю кнопку Обновить, данные должны быть включены в таблицу данных.

app.component.html

<div class="col-sm-10"> 
     <input type="radio" name="gender" [(ngModel)]="model.gender" value="male" checked> Male                         
     <input type="radio" name="gender" [(ngModel)]="model.gender" value="female"> Female<br>
 </div>
<button type="submit" class="btn btn-default" (click)="addEmployee()">Save</button>
<a class="btn btn-success" (click)="editEmployee(i)">Edit</a>
<button type="submit" class="btn btn-default" (click)="updateEmployee()">Update</button>

это мой app.component.ts

myValue;
  editEmployee(k){
    this.model2.name = this.employees[k].name;
    this.model2.DOB=this.employees[k].DOB;
    this.model2.mob = this.employees[k].mob;
    this.myValue = k;
  }

  updateEmployee(){
    let k= this.myValue;
    for(let i=0; i<this.employees.length;i++){
      if(i==k){
        this.employees[i]= this.model2;
        this.model2 = {};   
        this.msg = "Record is successfully updated..... ";
      }
    }  
  }

Answer 1

Ваш HTML выглядит нормально, вам нужно внести изменения в файл TS.В основном название model12 неверно, и вам не нужно назначать одно значение отдельно.

Ваш код будет выглядеть -

  model;
  selectedIndex;

  editEmployee(k){
    this.selectedIndex = k;
    this.model = Object.assign({},this.employees[k]);
  }

  updateEmployee(){

    if(this.employees[this.selectedIndex]){
      Object.assign(this.employees[this.selectedIndex], this.model);
       this.msg = "Record is successfully updated..... ";
    }else{
      this.employees.push(Object.assign({}, this.model));
      this.msg = "Record is successfully added..... ";
    }
  }

Answer 2

Привязка данных с переключателями работает с атрибутом value и не зависит от отмеченного атрибута.Поэтому, если вы установите, например, «мужской» в качестве модели по умолчанию в вашей модели, он будет выбран в шаблоне.

Так что для загрузки пола просто зайдите в model.gender, который является «мужской» или «женский».И для обновления Angulars Двусторонняя привязка данных должна делать это каждый раз, когда вы нажимаете на одну из радиокнопок, потому что она обновит вашу модель автоматически.

https://stackblitz.com/edit/angular-eferut?file=src%2Fapp%2Fapp.component.html