在Angular中，当我们单击Edit选项时如何加载单选按钮值 [英] In Angular how to load the radio button value when we click on Edit option

问题描述

在Angular中，当我单击编辑表单"按钮时如何加载单选按钮值.

In Angular How to Load the radio button value when i click on edit form button.

这是我的用户界面.

当我单击保存时，数据将插入到数据表中.但是，当我单击编辑"按钮时，表单不会加载单选按钮值，而当我单击更新"按钮时，数据应该会影响到数据"表中.

when i click on save the data is inserted into the data Table. But when i click on edit button the form is not loading with the radio button values and when i click on Update button the data should be affected into the Data table.

app.component.html

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

this is my 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..... ";
      }
    }  
  }

推荐答案

您的html看起来不错，您需要在ts文件中进行更改.基本上，名称model12是错误的，您不需要单独分配单个值.

Your html is looking fine you need to make the change in ts file. Basically name model12 is wrong and you don't need to assign the single value separately.

您的代码将如下所示-

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

这篇关于在Angular中，当我们单击Edit选项时如何加载单选按钮值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！