Winkel 2 ngModel ändern der select-box keine Aktualisierung der ausgewählten option

Ich kann oder auch nicht haben einen Fehler gefunden in den Winkel-2. Im Grunde, was ich versuche zu tun, ist erstellen Sie eine Liste der ausgewählten Elemente von Optionen, die ausgewählt aus einem select Feld und wenn ein Element ausgewählt ist, erstellt es eine neue leere select-box unterhalb der vorigen, so kann der Benutzer kontinuierlich fügen Sie die ausgewählten Elemente.

Also, was ich tun möchte, ist setzen Sie den unteren Auswahlfeld wieder auf einen leeren Wert, jedoch wenn ich versuchen, die ngModel Wert wieder auf 0 (oder leer) es hält immer noch die untere select-box, in der zuvor ausgewählten option.

@Component({
    selector: 'my-app',
    template: `
    <div *ngFor="let a of arr">
        <div *ngFor="let b of a.entities;let i = index">
            <select class="form-control input-sm" [(ngModel)]="a.entities[i]">
                <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
            </select>
        </div>
        <select class="form-control input-sm mb5" (change)="entitySelect(a)" [(ngModel)]="a.selected">
            <option value="0">- Select -</option>
            <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
        </select>
    </div>
    `,
})
export class App {
    items:Array<string> = ['red','green','blue'];
    constructor() {
        this.arr = [{
            entities: [],
            selected: 0
        }]
     }
     entitySelect(entity) {
         entity.entities.push(entity.selected);
         entity.selected = 0; //Revert bottom select box back to empty
     }
}

https://plnkr.co/edit/PMzbgEtyd4DFhObu1UVz

Die andere seltsame Sache ist, wenn ich Person.ausgewählt, um zu sagen, 'blau' statt 0, dann wird standardmäßig die Letzte select-Feld blau, aber nur auf der ersten Auswahl. Eine Auswahl nach, dass Sie die gleiche bleibt wie die vorhergehenden.

https://plnkr.co/edit/Ze5uS1JjAmI7QXjQ17kQ

InformationsquelleAutor Scot | 2016-12-15
  1. 3

    Es ist sehr schlechte Idee, mit 2-Wege-Datenbindung ([(ngModel)]) mit (change) Veranstaltung, wie Sie können nicht Vorhersagen/Winkel nicht Steuern, welche Maßnahmen behandelt werden ersten. So haben Sie, um schreiben Sie Ihre entitySelect - Funktion, um manuell einen Wert zuweisen zu entity\a. Zweiter Punkt hat genau die gleiche Gründe... Z.B., das funktioniert für mich:

    @Component({
selector: 'my-app',
template: `
    <div *ngFor="let a of arr">
        <div *ngFor="let b of a.entities;let i = index">
            <select class="form-control input-sm" [(ngModel)]="a.entities[i]">
                <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
            </select>
        </div>
        <select class="form-control input-sm mb5" (change)="entitySelect($event, a)" [ngModel]="a.selected">
            <option value="0">- Select -</option>
            <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
        </select>
    </div>
`,
})
export class App {
    name:string;
    items:Array<string> = ['red','green','blue'];
    constructor() {
        this.name = 'Angular2'
        this.arr = [{
            entities: [],
            selected: 0
        }]
    }
    entitySelect($event, entity) {
        entity.entities.push($event.target.value);
        $event.target.value = 0;
    }
}
    InformationsquelleAutor A. Tim
Schreibe einen Kommentar