webentwicklung-frage-antwort-db.com.de

Wie binden Sie Daten korrekt an die Optionsfelder in Angular2?

Ich habe eine Komponente mit zwei Optionsfeldern HTML look like

<div class="btn-group"  id="ProfitCodes">
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           id="point1"
           name="ProfitCode"><small>description</small>
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           [checked]="model.ForeignCompany.ProfitCode === 2"
           value="2"
           id="point2"
           name="ProfitCode"><small>description</small>
    </label>
</div>

Wenn ich auf "Speichern" klicke und das Modell an den Server schicke, sehe ich auf dem Server einen gültigen Wert für das Optionsfeld. Und dieser Wert wird fehlerfrei in der Datenbank gespeichert. Aber der Radiobutton mit dem entsprechenden Wert wird nach dem Binden von Daten nicht geprüft. In devTools sehe ich den Radioknopf:

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point1" name="ProfitCode" title="asdasda" type="radio" value="1" ng-reflect-name="ProfitCode" ng-reflect-value="1" ng-reflect-model="2" ng-reflect-checked="false">

Zweiter Radioknopf:

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point2" name="ProfitCode" title="asd" type="radio" value="2" ng-reflect-name="ProfitCode" ng-reflect-value="2" ng-reflect-model="2" ng-reflect-checked="true">

Ich sehe, dass die winkelveränderten Attribute und das Warten auf das zweite Optionsfeld aktiviert sind. Aber das passiert nicht .. Was mache ich falsch?

11
Seva

Das funktioniert in meinem Fall. Ich entferne [(ngModel)]

<div class="radio">
<label>
    <input type="radio"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           id="point1"
           (change)="onProfitSelectionChange(1)"
           name="ProfitCode"><small>description</small>
</label>
</div>
<div class="radio">
    <label>
        <input type="radio"
               value="2"
               [checked]="model.ForeignCompany.ProfitCode === 2"
               id="point2"
               (change)="onProfitSelectionChange(2)"
               name="ProfitCode"><small>description</small>
    </label>
</div>

und TS-Methode sehen so aus:

onProfitSelectionChange(entry): void {
    this.model.ForeignCompany.ProfitCode = entry;
}
20
Seva

Sie müssen nicht [angehakt] versuchen mit [(ngModel)], sondern verwenden [value] = "1" anstelle von value = "1"

<input type="radio" name="Coverage" [value]="1" [(ngModel)]="formdata.coverage_verified"  />Yes
14
<label *ngFor="let status of statuses">
    <input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id">
    <b>{{ status.name | i18n }}</b>
</label>
0
Voodoo Savage