Question

我已经构建了两组相同的单选按钮。但是只有使用ngFor循环构建的集合对我有效。

我使用相同的语法，因此无法弄清楚我在哪里犯了错误。

<form>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary" [class.active]="crabColour == crab.colour" *ngFor="let crab of crabs; let i = index">
      <input type="radio" name="shiftSubType" autocomplete="off"  [(ngModel)]="crabColour" [value]="crab.colour"> {{crab.colour}}
    </label>
  </div><br>

  <div class="btn-group btn-group-toggle" data-toggle="buttons2" id="trainingRadio">
    <label class="btn btn-primary" [class.active]="duckColour == 'red'">
      <input type="radio" name="training" id="trainingYesRadio" autocomplete="off"  [(ngModel)]="duckColour" [value]="red"> red
    </label>
    <label class="btn btn-primary" [class.active]="duckColour == 'yellow'">
      <input type="radio" name="training" autocomplete="off" [(ngModel)]="duckColour" [value]="yellow"> yellow
    </label>
  </div>
</form>

通过工作＆＃39;我的意思是当按下第二组按钮中的任何一个时，它都不会保持按下状态。

Answer 1

手动添加代码：

将[value]更改为value

<强> WORKING DEMO

[value]="yellow"会将黄色视为变量/可执行部分，并尝试对其进行评估。

[value]="crab.colour" // here it will get value from crab.colour

[value]="yellow" // here it will try to fetch value form yellow , but yellow itself is value , so you should use value only

使用ngFor工作构建的单选按钮。手动完全相同的集合构建角度2 +

1 个答案: