Angular2 RC2 Wählen Sie die Option selectedIndex

Question

Ich habe eine nicht eindeutige Auswahloptionen wie diese, der gleiche Wert bedeutet unterschiedliche Sache. Unsere Daten sind so und ich kann nur arbeiten, um die Daten anzupassen.

So kann ich Wert setzen, indem Sie selectedIndex einstellen.

document.getElementById("mySelect").selectedIndex = 3; 

Aber in Angular 2, bekam ich Fehler auf dieser Aussage " 'selectedIndex' Eigentum existiert nicht auf Typ 'Htmlelement.' Any".

Wie kann ich selectedIndex mit Angular2 finden oder wie kann ich es umgehen?

Update: Ich versuche setzen Sie den Standardwert auf die Auswahloption nach anderen Daten aus der Datenbank abgerufen. So etwas wie

this.data$.subscribe(data => { 
    this.data = data; 
    if (data.someConditionMet) { 
     document.getElementById("mySelect").selectedIndex = 3; 
    } 
}, 
error => this.errorMessage = <any>error);   

Bitte beachten Sie, dass die Werte in den Optionen doppelt sein könnten. Aber die Einträge sind nicht. Wert "1" könnte entweder "Apple" oder "Banana" darstellen. Deshalb möchte ich den Index anstatt den Wert verwenden.

Answer 1

Normalerweise würden Sie in Angular 2 einen anderen Ansatz wählen. Sie würden Ihre Daten die Dom steuern, nicht umgekehrt.

Etwas wie folgt aus:

<select id="mySelect"> 
    <option *ngFor="let dataValue of myDataArray" value = "dataValue.value" (click)="onSelected(dataValue)">{{dataValue.Text}}</option> 
</select> 

Und haben dann einen Handler onSelected in Ihrer Komponente, die Artikel, welche Daten kennt ausgewählt wurde.

Sie möchten eine Standardauswahl basierend auf Ihren Daten? Fügen Sie einfach [selected]="someJavascriptExpression" zum option Element hinzu. ZB: [selected]="dataValue.value === someCond && dataValue.text === someOtherCond". Was jedes option Element basierend auf Ihren Daten einzigartig macht.

Answer 2

Verwenden Sie einfach das Modell der Auswahl zu setzen oder den aktuellen Wert zu erhalten:

<select id="mySelect" [(ngModel)]="selectedValue"> 
    <option *ngFor="let dataValue of myDataArray" 
      value="dataValue.value" 
      (click)="onSelected(dataValue)"> 
    {{dataValue.Text}} 
    </option> 
</select> 

In Ihrer Komponente:

export class ComponentA { 
    selectedValue: number = -1; 

    // ... 

    this.data$.subscribe(data => { 
      this.data = data; 
      if (data.someConditionMet) { 
       selectedValue = 3; 
      } 
     }, 
     error => this.errorMessage = <any>error 
    ); 

Answer 3

Nur etwas interessante gefunden.

Für nicht eindeutige Auswahloptionen transformiert Angular2 die Werte und fügt automatisch einen Index hinzu. Zum Beispiel von

<select id="mySelect"> 
    <option value = "1">Apple</option> 
    <option value = "2">Orange</option> 
    <option value = "3">Pineapple</option> 
    <option value = "1">Banana</option> 
</select> 

zu

<select id="mySelect"> 
    <option value = "0: 1">Apple</option> 
    <option value = "1: 2">Orange</option> 
    <option value = "2: 3">Pineapple</option> 
    <option value = "3: 1">Banana</option> 
</select> 

Also in meinem Code, kann ich nur

this.data$.subscribe(data => { 
    this.data = data; 
    if (data.someConditionMetForBanana) { 
     ngModelBoundSelectedValue = "3: 1"; 
    } 
}, 
error => this.errorMessage = <any>error); 

hholtij in seinem Kommentar richtig war. Und Angular2 macht dieses wunderbare Ding für uns.