Bindung ngModel zu einem Modell für eine ausgewählte Steuer

In Angular 1.x können Sie ngModel zu einem Modell für eine ausgewählte Steuerelement binden:Bindung ngModel zu einem Modell für eine ausgewählte Steuer

<select ng-model="selectedPerson" 
    ng-options="person as person.name for person in people"> 
</select>

Wenn eine Option ausgewählt ist, das selectedPerson Modell des Punkt person Modell, das der Benutzer ausgewählt hat.

Gibt es eine Möglichkeit, dasselbe in Angular2 zu tun?

Ich habe folgende ohne Glück versucht:

<select [(ngModel)] = "selectedPerson"> 
    <option *ngFor="#person of people"> {{ person.name }}</option> 
</select>

ich auch versucht habe:

<select [(ngModel)] = "selectedPerson"> 
    <option *ngFor="#person of people" [value]="person"> {{ person.name }}</option> 
</select>

Im ersten Versuch, selectedPerson Referenzen Modell person.name statt dem person Objekt. Und im zweiten Versuch referenziert es ein Objekt, das kein JSON-Objekt zu sein scheint.

Irgendwelche Ideen, was ich falsch mache? Ist das überhaupt möglich?

Quelle

2015-12-27 pixelbits

Ich glaube nicht, es derzeit möglich ist. Sehen Sie dieses https://github.com/angular/angular/issues/4843 – Chandermani

Sie könnten ein <select> in einer Form umzusetzen mit der FormBuilder Richtlinie:

import { FormBuilder, Validators } from '@angular/forms'; 

export class LoginPage { 

    constructor(form: FormBuilder) { 
    this.cities = ["Shimla", "New Delhi", "New York"]; // List of cities 
    this.loginForm = form.group({ 
     username: ["", Validators.required], 
     password: ["", Validators.required], 
     city: ["", Validators.required] // Setting the field to "required" 
    }); 
    } 

    login(ev) { 
    console.log(this.loginForm.value); // {username: <username>, password: <password>, city: <city>} 
    } 

}

In Ihrem .html:

<form [ngFormModel]="loginForm" (submit)="login($event)"> 

    <input type="text" ngControl="username"> 
    <input type="password" ngControl="password"> 
    <select ngControl="city"> 
     <option *ngFor="#c of cities" [value]="c">{{c}}</option> 
    </select> 
    <button block type="submit" [disabled]="!loginForm.valid">Submit</button> 

</form>

Official Documentation

Quelle

2015-12-27 06:26:23

Dies ist nicht, wonach ich bin. Die Verwendung von ngControl bindet sich immer noch an den Wert des Eingabesteuerelements und nicht an das Modell. Wenn eine Dropdown-Liste ausgewählt ist, versuche ich, selectedPerson an das Modell {name: ''} zu binden und nicht nur an den Namen. Versuchen Sie, Ihr Beispiel zu aktualisieren, um Modelle zu verwenden, in denen eine Stadt ein Objekt ist: {name:}. Sie werden sehen, dass loginForm.city nur eine Zeichenfolge ist. – pixelbits

@pixelbits Warum setzen Sie 'this.selectedPerson = {}' nicht einfach in Ihrem Konstruktor und dann '[(ngModel)] =" selectedPerson.name "' mit einem '[value] = person.name' in der Optionen? Dies führt zu: 'selectedPerson: {name:" "}'. –

Das ist nicht das Gleiche wie die Bindung an ein Modell. Ich könnte diese Objekte aus einer Datenbank abrufen. Ich suche nach dem Äquivalent von ng-options = "Person als Person.Name für Person in Menschen" – pixelbits

Ich habe das gleiche Problem versucht, eine zu übergeben Objekt als ausgewählten Wert für ein ngModel. Eine alternative Lösung, die ich sehe, ist die Verwendung einer stringifizierten Version des Objekts, die an eine Zeichenfolge übergeben wird, aber das ist sehr schmutzig.

Am Ende habe ich beschlossen, einen separaten Index im Objekt zu erstellen, der an das ngModel übergeben wird. Dies verwende ich, um das Objekt auszuwählen und die Aktion auszuführen.

auch in erhöhten Ausgabe: https://github.com/angular/angular/issues/4843 und How to use select/option/NgFor on an array of objects in Angular2

Quelle

2016-01-11 21:04:38 TomG

Bindung ngModel zu einem Modell für eine ausgewählte Steuer

Antwort

Verwandte Themen