Angular2 RC2 Select Option selectedIndex

Question

У меня есть уникальные варианты выбора, подобные этому, то же самое значение означает другую вещь. Наши данные подобны этому, и я могу работать только в соответствии с данными.

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

Поэтому я могу установить значение, установив selectIndex.

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

Но Угловое 2, я получил ошибку на этом утверждении «Property„SelectedIndex“не существует на типе" HTMLElement. Любой».

Как я могу найти SelectedIndex с Angular2 или как его обойти?

Обновление: Я пытаюсь установить значение по умолчанию в соответствии с другими данными, полученными из базы данных. Так это что-то вроде

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

Обратите внимание, что значения в параметрах могут быть дублирующими. Но записей нет. Значение «1» может представлять собой «Apple» или «Banana». Вот почему я хочу использовать индекс, а не значение.

Answer 1

Как правило, вы бы использовали другой подход в Угловом 2. У вас были бы данные о контроле над домом, а не наоборот.

Что-то вроде этого:

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

А затем обработчик onSelected в компоненте, который знает, какой элемент данных был выбран.

Вам нужен выбор по умолчанию на основе ваших данных? Просто добавьте [selected]="someJavascriptExpression" в элемент option. Например: [selected]="dataValue.value === someCond && dataValue.text === someOtherCond". Независимо от того, какой элемент option уникален на основе ваших данных.

Answer 2

Просто используйте модель выбрать, чтобы установить или получить текущее значение:

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

В компоненте:

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

Просто найти что-то интересное.

Для уникальных опций выбора Angular2 преобразует значения, добавив индекс автоматически. Например, из

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

в

<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> 

Так что в моем коде, я могу просто сделать

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

hholtij был прав в своем комментарии. И Angular2 делает эту замечательную вещь для нас.