Winkel 4 Bootstrap 4 Optionsfeldgruppe wird nicht bleiben Tasten überprüft

Ich habe folgende Code in einem Winkel 4 reaktive Form:Winkel 4 Bootstrap 4 Optionsfeldgruppe wird nicht bleiben Tasten überprüft

<div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary" *ngFor="let item of list;let i=index" > 
     <input type="radio" name="someName" [value]="item" (click)="onSelectItem(i)" formControlName="someName" [checked]="isChecked(i)"> {{item}} 
     </label> 
    </div>

onSelectItem (i) den Wert zuordnet 'i' in eine Variable , isChecked (i) gibt nur dann true zurück, wenn i = diese Variable

Allerdings bleiben die Schaltflächen nicht aktiviert, wenn ich auf sie klicke, sie behalten nur den gleichen Schein, es macht mich verrückt.

Ein Update wäre, Englisch ist meine zweite Sprache sehr geschätzt, danke und guten Tag

Quelle

2017-07-17 Tom Barat

Können Sie das gleiche mit Plunker reproduzieren. – SaiUnique

https://embed.plnkr.co/QJHmXFVNnAvFliVkF6zc/ –

@TomBarat Was ist los mit dem Plunker? Ich sehe nicht, dass es unkontrolliert wäre. Nun, wir müssen tatsächlich das CSS-Styling entfernen, um das in diesem Fall zu sehen. Also sehe ich nicht, wie optisch dein jetziges Styling aussehen würde, dass es anders aussehen würde? – Alex

Ihre Plunker den benötigten Code fehlen den Bootstrap laufen zu lassen. Fügen Sie alle diese Zeilen zu Ihrer index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Working plnkr

Code from Bootstrap 4

Quelle

2017-07-19 19:20:22 HaveSpacesuit