Angular2 RC2选择选项selectedIndex

-1

我得到了像这样的非唯一选择选项，相同的值意味着不同的事情。我们的数据是这样的，我只能工作以适应数据。Angular2 RC2选择选项selectedIndex

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

但在角2，我得到了这个说法错误“财产‘的selectedIndex’上键入‘HTML元素’。任何不存在”。

我如何找到用Angular2的selectedIndex或者我该如何解决它？

更新：我想根据从数据库检索到的其他数据设置默认值到选择选项。所以它就像

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

请注意，选项中的值可能是重复的。但条目不是。值“1”可以代表“苹果”或“香蕉”。这就是为什么我想使用索引而不是价值。

来源

2016-07-06 Shawn

我不认为它是重复的。请仔细阅读。这是关于将默认值设置为非唯一选项。 – Shawn

您需要投射文件。getElementById（“mySelect”）在尝试使用selectedIndex属性之前转换为HTMLSelectElement类：（ document.getElementById（“mySelect”））。selectedIndex = 3; –

通常情况下，你会在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元素都是唯一的。

来源

2016-07-06 23:06:40 hholtij

hholtij，我已经做到了。我试图从数据库检索数据时设置默认值。我刚刚更新了我的问题。那么还有什么输入？欣赏它。 – Shawn

只需将[selected] =“dataValue.value === someCondition”添加到选项元素即可。 – hholtij

值1可以代表“苹果”或“香蕉”。这就是为什么我想使用索引而不是价值。 – Shawn

只需使用选择的模式来设置或获取当前值：

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

来源

2016-07-06 23:38:33 rinukkusu

我有，请注意选项列表中的值是非唯一的。所以使用[（ngModel）] =“selectedValue”可能会导致不希望的结果。 – Shawn

无论如何，如果它有重复的条目，这是什么选择？去@ hholtij的评论然后... – rinukkusu

关于一个条目的东西必须是唯一的，否则选择将是没有意义的。如果它不是价值，那么可能是价值和文本的结合。你基本上可以在[selected]属性中有任何javascript表达式，例如[selected] =“dataValue.value === someCond && dataValue.text === someOtherCond” – hholtij

刚发现一些有趣的事情。

对于非唯一选择选项，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为我们做了这件美妙的事情。

来源

2016-07-07 01:41:38 Shawn

Angular2 RC2选择选项selectedIndex

回答

相关问题