Question

我在组件中有一个如下所示的json：

radioData:[]=
[
    {
        id: 1,
        description: 'entry 1'
        ,isSelected: true
    },
    {
        id: 2,
        description: 'entry 2'
         ,isSelected: false
    },
    {
        id: 3,
        description: 'entry 3'
         ,isSelected: false
    },
    {
        id: 4,
        description: 'entry 4'
    }

]

我试图显示单选按钮，并根据isSelected字段将其预选为TRUE。只有一项将isSelected设置为TRUE。我将它们呈现为html，如下所示：

<table *ngIf="radioData">  
    <tr *ngFor="let iRadio of radioData; let i = index">
      <td>
          <input type="radio" name="radioGroup" [value]="true"  [(ngModel)] ="iRadio.isSelected" [checked] ="iRadio.isSelected" > 
          <label>{{iRadio.description}} </label> 
      <td>
    </tr>
</table>

<button (click)="viewUpdates()">View</button>

当选择从一个单选按钮更改为另一个单选按钮时，新选择的单选按钮的字段isSelected更改为TRUE，但先前选择的单选按钮的字段isSelected仍设置为TRUE。但是在用户界面中，我可以看到新选择的单选按钮已被选中

在这种情况下，如何取消选择广播中先前设置的选择？

Answer 1

在组件中添加一些属性以跟踪当前选定的项目。

public selectedIndex = 0

在选择了新选项（注意selectedIndex事件）之前更新selectedIndex之前，将ngModelChange的项目设置为false。

<table *ngIf="radioData">  
    <tr *ngFor="let iRadio of radioData; let i = index">
      <td>
          <input type="radio" name="radioGroup" [value]="true"  
            (ngModelChange) = "radioData[currentIndex].isSelected = false; currentIndex=i"  
             [checked] = "iRadio.isSelected" [(ngModel)] = "iRadio.isSelected" > 
           <label>{{iRadio.description}} </label> 
          <td> 
        </tr>
    </table>

DEMO

如何在角度打字稿中取消选择输入广播上的先前设置的选择

1 个答案: