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>

所以我可以通过设置selectedIndex来设置值。

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

但是在Angular 2中，我在这个声明中得到了错误＆＃34; Property＆＃39; selectedIndex＆＃39;类型＆＃39; HTMLElement＆＃39;中不存在。任何＆＃34;

如何使用Angular2找到selectedIndex或如何绕过它？

更新：我根据从数据库中检索到的其他数据，尝试设置默认值到select选项。所以它＆＃39;

之类的东西

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

请注意，选项中的值可能重复。但条目不是。价值＆＃34; 1＆＃34;可以代表＆＃34; Apple＆＃34;或＆＃34;香蕉＆＃34;。这就是我想使用索引而非价值的原因。

Answer 1

通常，您会在Angular 2中采用不同的方法。您可以将数据控制为dom，而不是相反。

这样的事情：

<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的模型来设置或获取当前值：

<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为我们做了这件好事。

Answer 4

使用$ event.target.selectedIndex。让selIdx = 0.然后，

<select (change)="selIdx = $event.target.selectedIndex;"> Select One
   <option *ngFor="let a of array;let i = index;" value="{{ a.val }}"  [selected]="selIdx == i">
      {{ a.desc }}
   </option>
</select>

Angular2 RC2选择OptionIndex选项

4 个答案: