Angular2 wie set radio-button als aktiviert mit einem default-Wert

Ich bin neu Angular2, ich habe eine radio-Gruppe, und ich versuche, es zu binden mit [(ngModel)], um die Entität person.testBoolean, so dass ich speichern Sie es in der Datenbank. Ich möchte ein default-Wert als gewählt und ich habe gesehen, einige Beispiele und gefunden, dass Sie den Standardwert für [(ngModel)], aber in meinem Fall möchte ich die Bindung zu meiner Person, daher kann ich nicht verwenden, [(ngModel)]. Kann jemand raten, alternative Optionen. checked = idx funktioniert nicht.

<div class="form-group">
    <label for="radioboolean">Boolean: </label>
    <div *ngFor="let entry of entries; let idx = index" class="radio-inline" >
       <input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="idx === 1" [value]="entry.id" />{{ entry.description }}
    </div>
</div>

Ts code:

 entries = [
              {id: 1, description: 'True' },
              {id: 2,description: 'False'},
              {id: 3,description: 'Undefined'}
           ];

Person meiner Person:

export interface IPerson {

    id: string;
    name: string;
    testNumber: number | null;
    testDatetime: Date | null;
    testBoolean: boolean | null;
    //Refs to parent entities
    team: ITeam;
    teamId: string;

};
  • ja, das ist richtig, wir können direkt verwenden, um die id-Spalte hat, aber es hat nicht funktioniert 🙁 , Standard-radio-button ist noch nicht aktiviert/aktiviert
InformationsquelleAutor Auo | 2017-10-10
  1. 5

    Können Sie die id der Eintrag wie diesen: [checked]="entry.id === 1"

    <div *ngFor="let entry of entries; let idx = index" class="radio-inline" >
                <input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="entry.id === 1" [value]="entry.id" />{{ entry.description }}
            </div>
    • ja, das ist richtig, wir können direkt verwenden, um die id-Spalte hat, aber es hat nicht funktioniert 🙁 , Standard-radio-button ist noch nicht aktiviert/aktiviert
    • Versucht [checked]="entry.id === default"? Wo default = this.default Komponente.
    • Hi Swoox, Danke, ich habe versucht wie oben, aber für einige Grund "dafür.default" eingestellt ist undefiniert, daher Standard-radio-buttons nicht aktiviert ist. Transcript default: 3; entries = [{ id: 1, description: 'True' },{ id: 2, description: 'False' }, { id: 3, description: 'Undefined' }]; [checked]="entry.id === default"
    • Mit Standard-I meany stellen Sie einen Wert auf Ihre Komponente über Konstruktor private defaullt: any. dann, wo du deine Einträge sagen this.default = 1. Also die checkbox mit dem Eintrag der id 1 überprüft werden.
    • Meinst du wie diese? Bisher habe ich deklariert eine variable innerhalb der Klasse , über den Konstruktor. Meinst du, deklarieren Sie innerhalb der Konstruktor: constructor(private defaultradio: any) { } ngOnInit() { this.defaultradio = 1; .....
    • private defaullt: any constructor() { }
    • Jetzt die Konsole.log-Anzeige den Wert 1 anstelle von undefined ist aber immer noch das Standard-radio-Schaltfläche nicht ausgewählt ist. private defaultradio: any; [checked]="entry.id === defaultradio"
    • Eintrag.id ist eine Zahl, eine Zeichenfolge? Gleich defaultradio string oder eine Zahl?
    • Eintrag.id ist eine Nummer aus dem obigen code-snippet, defaultradio ist, geben Sie eine beliebige, aber ich geändert, um die Anzahl jetzt. noch ist es nicht wählen Sie den radio-button.
    • Dann weiß ich nicht, es entweder gl.

    InformationsquelleAutor Swoox
  2. 1

    Wenn Sie wollen immer das erste Element ausgewählt werden, die Sie verwenden können.

    In Ihre loop - *ngFor="lassen Sie den Eintrag, die Einträge lassen; first = first;

    und in Ihren radio-button-group - [checked] = "ersten"

    Beispiel:

    <div *ngFor="let entry of entries; let first = first; let idx = index" class="radio-inline" >
<input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="first" [value]="entry.id" />{{ entry.description }}
</div>
    InformationsquelleAutor Duncan Faulkner
  3. 1

    Ein Beispiel:
    in der Template-Datei:

     <form [formGroup]="formGender">
        <input type="radio" value="1" [(ngModel)]="userBasicInformation.gender">
        <span class="font-size-12px font-bold">MALE</span>
        <input type="radio" value="0" [(ngModel)]="userBasicInformation.gender">
        <span class="font-size-12px font-bold">FEMALE</span>
 </form>

    Komponente.ts-Datei:

    ngOnInit() {
    this.userBasicInformation.gender = '0';
}

    Und Ergebnis der radio-button wählen, wird standardmäßig auf die Gleichstellung der Wert = 0 (Weiblich) als folgende Bild:

    Angular2 wie set radio-button als aktiviert mit einem default-Wert

    InformationsquelleAutor Hai Dinh
Schreibe einen Kommentar