Legen Sie den ursprünglich ausgewählten Eintrag in Auswahlliste in Angular2 fest

Habe ich es geschafft, eine Select-Liste zu binden mit meinem Modell für den Zweck der Speicherung, aber ich kann nicht herausfinden, wie man Angular2 automatisch wählen Sie die richtige option in der Select-Liste, wenn ich die Bereitstellung von Bearbeitungsfunktionen. In anderen Worten, wenn ich bin Bearbeiten eines bereits vorhandenen Objekt über ein Formular, muss ich die Select-Liste zu reflektieren, den ursprünglichen Zustand des Objekts (z.B. option 5 in der select-Liste), anstatt es einfach standardmäßig auf das erste Element.

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

So Stelle ich mir es sollte funktionieren, muss aber nicht!

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object === originalObject">{{object.name}}</option>
</select>

Also eigentlich bin ich versucht zu machen, Verwendung der 'selected' - Eigenschaft auf eine option, aber aus welchem Grund auch immer nicht tun. Die "selectedObject" in diesem Fall wäre ein Objekt in der Komponente, die es Lesen können.

InformationsquelleAutor der Frage user3452805 | 2016-06-06

  1. 43

    Okay, so habe ich herausgefunden, was das problem war und ist der Ansatz, den ich glaube, am besten funktioniert. In meinem Fall, da die beiden Objekte nicht identisch mit einer Javascript-Perspektive, wie in: Sie haben gemeinsam die gleichen Werte, aber Sie waren verschiedene tatsächliche Objekte, z.B. originalObject instanziiert wurde völlig getrennt von objects was war im wesentlichen ein array von Referenz-Daten (zum füllen der dropdown -).

    Fand ich, dass der Ansatz, der arbeitete für mich am besten war der Vergleich eine einzigartige Eigenschaft der Objekte, anstatt direkt zu vergleichen, die zwei ganze Objekte. Dieser Vergleich erfolgt in der gebundenen Eigenschaft selected:

    <select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object.uniqueId === originalObject.uniqueId">{{object.name}}</option>
</select>

    InformationsquelleAutor der Antwort user3452805

  2. 41

    Update Winkel 4.X.X, gibt es eine neue Möglichkeit zum markieren einer option:

    <select [compareWith]="byId" [(ngModel)]="selectedItem">
  <option *ngFor="let item of items" [ngValue]="item">{{item.name}}
  </option>
</select>

byId(item1: ItemModel, item2: ItemModel) {
  return item1.id === item2.id;
}

    InformationsquelleAutor der Antwort mrebval

  3. 7

    Wenn Sie

    <select [ngModel]="object">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

    Müssen Sie die Eigenschaft object in Ihnen die Komponenten-Klasse, um das Element aus objectsdie Sie haben möchten, ausgewählt.

    class MyComponent {
  object;
  objects = [{name: 'a'}, {name: 'b'}, {name: 'c'}];
  constructor() {
    this.object = this.objects[1];
  }
}

    InformationsquelleAutor der Antwort Günter Zöchbauer

  4. 1

    Erreichen Sie das gleiche mit

    <select [ngModel]="object">
  <option *ngFor="let object of objects;let i= index;" [value]="object.value" selected="i==0">{{object.name}}</option>
</select>

    InformationsquelleAutor der Antwort Jinu

  5. 0

    Wird es funktionieren, wenn Sie nur entfernen Sie das bearbeitete Element aus dem array, und schieben Sie es an den Anfang des Arrays, so wäre es automatisch ausgewählt?

    InformationsquelleAutor der Antwort AngJobs

Schreibe einen Kommentar