在Angular中，当我们单击Edit选项时如何加载单选按钮值

Question

在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

使用单选按钮进行的​​数据绑定使用value属性，并且与被检查属性无关。因此，如果您设置例如在您的模型中，默认为“男性”，它将在模板中选择。

因此要加载性别，只需访问model.gender即可，它可以是“ male”或“ female”。并且要更新Angulars，每当您单击其中一个单选按钮时，双向数据标记都应该为您完成，因为它将自动更新模型。

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

Answer 2

您的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..... ";
    }
  }