Angular：刪除項目後自動填充字段發生變化

我有一個使用PrimeNG組件的Angular 2應用程序。Angular：刪除項目後自動填充字段發生變化

的UI具有多選（p-autoComplete）類似於一個自動填充部件從the documentation：

<p-autoComplete [(ngModel)]="countries" 
       [suggestions]="filteredCountriesMultiple" 
       (completeMethod)="filterCountryMultiple($event)" 
       [minLength]="1" 
       placeholder="Countries" 
       field="name" 
       [multiple]="true"> 
</p-autoComplete>

唯一的區別是，在我的情況下，輸入字段具有固定尺寸和滾動條。

問題：

，當我從它能夠將焦點移動的輸入場的底部的自動完成列表中間刪除元素每次。它看起來像這樣：

這對於用戶來說非常討厭的，特別是當有幾個字段應該被刪除。

問題：如何在刪除元素後強制滾動保持在同一位置？

如何重現：

更具體地講，您可以通過直接使用瀏覽器控制檯documentation page爲ui-autocomplete-multiple-container.ui-inputtext CSS類添加下一個CSS

max-width: 150px; 
max-height: 100px; 
overflow-y: auto;

重現該問題。

UPDATE： 我設法通過使用像這樣的代碼在組件設立onUnselect方法滾動條位置：

onUnselect(event: any) { 
    document.querySelector("div.my-input-class").scrollTop 
}

更新2：我設法使它工作

解決方案是onUnselect和onFocus事件處理程序的組合。

首先。我將最後一個滾動條位置保存到onUnselect調用中的一個字段中。

二。我在onFocus呼叫期間將此值設置爲指定的元素。

相應的代碼如下所示：

scrollPosition: number = 0; 

onUnselect(event: any) { 
    let input = document.querySelector("div.my-input-class"); 
    this.scrollPosition = input.scrollTop; 
} 

onFocus(event: any) { 
    let input = document.querySelector("div.my-input-class"); 
    input.scrollTop = this.scrollPosition; 
}

它運作良好，而且很可能這將是最終的解決方案。

但我不喜歡它。如果PrimeNG的人在他們的組件中嵌入了這樣一個有用的功能，情況會好得多。對我來說，奇怪的是爲什麼它沒有出現。

如果您找到更好的解決方案，請提出。

來源

2017-08-03 Oleksandr Shpota

您可以創建一個plunker再現？ – Aravind

看起來光標正在引起跳躍行爲。所以我會建議嘗試禁用光標，當一個項目被刪除（也許通過禁用該元素）或嘗試切換焦點到其他元素之前刪除項目。我不知道你使用的控制器是否可以讓你這樣做，但我無法測試它，直到我能夠訪問計算機 – Sal

此外，這是我見過的最好的結構化問題之一。很容易看到/理解你的問題。感謝您付出的時間和精力！ – Sal

您應該使用onFocus事件處理同樣如下，

<p-autoComplete [(ngModel)]="countries" 
       [suggestions]="filteredCountriesMultiple"      
       (completeMethod)="filterCountryMultiple($event)" 
       styleClass="width12" (onFocus)="onFocus($event)"> 

    .... 


onFocus(event){ 
     window.scrollTo(0, 0); 

}

LIVE DEMO

來源

2017-08-05 12:40:27 Aravind

可能是我做錯了什麼，但我試過了，它不起作用。演示沒有任何滾動條，因此無法檢查它。無論如何，我不明白如何設置窗口的屬性影響滾動條內的特定頁面元素？在我的情況下，我需要在輸入元素中設置滾動條的位置，而不是頁面中的滾動條的位置。 –

@OleksandrShpota縮小窗口大小並進行測試。 – Aravind

現在我明白你的意思了。可能的問題並不完全清楚 - 我需要控制輸入元素上的滾動條，而不是窗口中的滾動條。您提出的代碼會更改窗口的滾動條位置。 –

onUnselect(event: any) { 
    // get index of the removed element 
    // get total options count 
    // get height of the element that contains the options 
    // divide the height by number of options 
    // set scroll potion to the result of division multiplied by the index 
    document.querySelector('.ui-autocomplete-multiple-container.ui-inputtext').scrollTop = calculatedValue; 
}

來源

2017-08-05 20:06:33

你打算如何設置滾動位置？我得到了元素並設置了它的'scrollTop'，即使沒有計算它也不起作用。比方說，我將元素的「scrollTop」設置爲100 - 滾動像以前一樣跳到底部。 –

檢查更新的答案 –

這正是我剛剛在我的評論中解釋過的，我試過這種方式，但它不起作用:( –

Angular：刪除項目後自動填充字段發生變化

回答

相關問題