webentwicklung-frage-antwort-db.com.de

So binden Sie eine Optionsschaltfläche in beta2 2

Wie erreicht man in Beta 6 die Bindung von Radiobuttons?

Ich habe ein tolles Programm für Beta 0 gefunden (siehe http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview ), aber wenn ich versuche, es auf Beta 6 zu aktualisieren, bricht es furchtbar ab (siehe http: //plnkr.co/edit/voU933?p=preview ).

Ich habe mir das Commit durch die eingebaute Unterstützung für Radiooptionen angesehen (siehe https://github.com/angular/angular/commit/e725542 ), das dieses Beispiel enthält

@Component({
  template: `
    <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
  `
})
class FoodCmp {
  foodChicken = new RadioButtonState(true, "chicken");
  foodFish = new RadioButtonState(false, "fish");
}

aber meine versuche, diese arbeit zu machen, sind bis jetzt wie mein gescheiterter plnkr gelaufen.

angularangular2-forms
14
Emdot

Update

Radio funktioniert einwandfrei in RC.4 und dem neuen Formularmodul . Siehe beispielsweise den Plunker in https://stackoverflow.com/a/38590919/217408

Original

Mehrere Probleme.

Die Verwendung von <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script> verursachte eine Ausnahme. Ich bin es los, indem ich `min.

Das Funkgerät bindet den Wert {checked: true} anstelle von value. Dies ist offensichtlich ein Fehler und wahrscheinlich derselbe wie dieser

Ich habe es mit einem hässlichen Workaround arbeiten lassen. Siehe https://plnkr.co/edit/988PSJKXCfrUXfLOGgyg?p=preview

    <input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'"  name="sex" value="male">Male<br>
    <input type="radio" [ngModel]="{checked: model.sex == 'female'}"  (ngModelChange)="model.sex='female'" name="sex" value="female">Female
18
Günter Zöchbauer

Für alle, die dies lesen, haben sich die Formulare geändert und die Optionsschaltflächen in der letzten Version (RC 3) haben sich geändert. Jetzt sind keine Tricks erforderlich :) 

Dieses PR bietet die Möglichkeit für Optionsfelder, eine FormControl .__ gemeinsam zu nutzen. Beispiel. Dies bedeutet, dass Sie kein RadioButtonState .__ mehr erstellen müssen. Optionsfelder verwalten.

Vor:

<form #f="ngForm">
   <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
</form>

{{ f. value | json }}      // { foodChicken: {value: 'chicken', checked: false}, foodFish: {value: 'fish', checked: true} }
class MyComp {
   foodChicken = new RadioButtonState(false, 'chicken');
   foodFish = new RadioButtonState(true, 'fish');
}

Nach dem:

<form #f="ngForm">
   <input type="radio" name="food" [(ngModel)]="food" value="chicken">
   <input type="radio" name="food" [(ngModel)]="food" value="fish">
</form>

{{ f. value | json }}      // { food: 'fish' }
class MyComp {
   food = 'fish';
}

siehe https://github.com/angular/angular/pull/9228

8
Adrien Pavillet

Möglicherweise können Sie die (ngModelChange)- und die harte Kodierung der Eingabewerte zweimal mit dem (change)-Ereignis loswerden:

<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (change)="model.sex=$event.target.value"  name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}" (change)="model.sex=$event.target.value" name="sex" value="female">Female

Aktualisierte plnkr.co-Demo: https://plnkr.co/edit/NiN83eCzMD3V6oe88Obg?p=preview

2
martin

Ich habe eine Version erstellt, indem nur ein Klickereignis für die geladenen Elemente verwendet und der Wert der Auswahl an die Funktion "getSelection" übergeben und das Modell aktualisiert wurde.

In Ihrer Vorlage:

<ul> <li *ngFor="let p of price"><input type="radio" name="price" (click)="getValue(price.value)" value="{{p}}" #price> {{p}} </li> </ul>

Deine Klasse:

export class App {

  price:string;

  price = ["1000", "2000", "3000"];

  constructor() {   }

  model = new SomeData(this.price);

  getValue(price){
    this.model.price = price;
  }
}

Siehe Beispiel: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

0
MrLukrative