单选按钮，两个按钮都被选中

Question

<div class="container">
  <div class="row">
    <form>
      <div class="form-group">
        <label>username</label>
        <br />
        <input type="text" class="form-control" />
      </div>
      <div class="form-group">
        <label>email</label>
        <br />
        <input type="email" class="form-control" />
      </div>
      <div class="form-group">
        <label>secret question</label>
        <br />
        <select type="radio" class="form-control">
          <option value="pet">your fav. pet?</option>
          <option value="teacher">your fav. teacher?</option>
        </select>
      </div>
      <div class="form-group">
        <textarea cols="60" rows="5"></textarea>
      </div>
      <div>
        <p style="margin: 10px">your reply:</p>
      </div>
      <div class="radio" *ngFor ="let gender of genders">
        <label> <input type="radio" [value]="gender" />{{ gender }} </label>
      </div>
      <button type="submit" style="margin-left: 10px">submit</button>
    </form>
  </div>
</div>

在 div class="radio" 中，我传递了一个字符串数组，其中包含 2 个值“男性”和“女性”。预期的行为应该是一旦男性选择女性应该得到联合国选择，反之亦然。但我不知道为什么我可以同时选择男性和女性单选按钮。

提前致谢

Answer 1

您必须在输入中添加属性名称

<input type="radio" [value]="gender" name="gender" />{{ gender }}