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

回答

相關問題