Question

在ngFor中的一项内选择无线电输入会触发其他选中的无线电输入。创建了demo。

HTML

<div class='section' *ngFor="let item of radioData">
    <div class="radio-selection">
        <input type="radio" attr.name="radio-{{item.Id}}" value="true" attr.id="radio-first-{{item.Id}}" [(ngModel)]='item.IsSelected'>
        <label attr.for="radio-first-{{item.Id}}">Radio-first {{item.Id}}--value={{item.IsSelected}}</label>
    </div>
    <div class="radio-selection">
        <input type="radio" attr.name="radio-{{item.Id}}" value="false" attr.id="radio-second-{{item.Id}}" [(ngModel)]='item.IsSelected'>
        <label attr.for="radio-second-{{item.Id}}">Radio-second {{item.Id}}--value={{item.IsSelected}}</label>
    </div>
</div>

css

.section {
  border:1px solid #000;
  margin-bottom:1rem;
}
.radio-selection {
    input[type="radio"] {
      display: none;
    }
    input[type="radio"] + label {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      margin: 5px;
      cursor: pointer;
      &:hover {
        &:before {
          border-color: green;
        }
      }
    }

    input[type="radio"] + label:before {
      content: "";
      background: #fff;
      border: 1px solid #333;
      display: inline-block;
      vertical-align: middle;
      width: 15px;
      height: 15px;
      margin-right: 10px;
      text-align: center;
      padding: 2px;
      border-radius:50%;
    }

    input[type="radio"]:checked + label:before {
      background:red;
      box-shadow: inset 0px 0px 0px 2.5px #fff;
    }
  }

谢谢

Answer 1

使用name代替attr.name来设置输入元素的名称（请参见this stackblitz）：

<input type="radio" name="radio-{{item.Id}}" ...>

或使用属性绑定语法（请参见this stackblitz）：

<input type="radio" [name]="'radio-'+item.Id" ...>

角度6中的自定义单选按钮选择错误（在ngFor内部）

1 个答案: