從輸入按鈕和列表中刪除項目？

Question

這是我的所有問題-> https://stackblitz.com/edit/dropdown-fill-empty-uecsjw?file=src%2Fapp%2Fapp.component.ts

當前發生。

當我從下拉菜單中選擇一些項目並在名為“Remove”的按鈕上將它們從輸入按鈕中的偵聽器中刪除的按鈕上刪除時，它看起來好像仍然被選中和選中（來自 input ）。

我知道原因。 因為當我點擊按鈕並調用該函數時，我不會在選擇時觸發，也沒有removedItems。

問題是否可以刪除按鈕上的選定項目（函數 removeTemplate ）並在我的輸入中刪除它？

我正在使用 devExreme 組件，其中有方法 removeItems 但我需要刪除並單擊按鈕。

代碼在這里：

   trainingSelected(e) {
    this.newItems = this.selectedPlans.filter(
      p => !e.removedItems.includes(p)
    );
    this.newItems.push(...e.addedItems);
    console.log('new items, ' , this.newItems);
    this.selectedPlans = this.newItems;
  }

    removeTemplate(e, training){
    console.log(e)
    console.log(training)
    e.stopPropagation();
    this.existingIndex = this.selectedPlans.indexOf(training);
    this.selectedPlans.splice(this.existingIndex , 1);
    // this.newItems.filter(item => item.id !== training.id) 
  }

Answer 1

當然我們可以刪除顯示的值。 為此，我們需要引用dx-tag-box組件。 我介紹兩種方法。

解決方案 1：模板引用

• <dx-tag-box #tagBox添加模板引用到 dx-tag-box html 標簽
• 發送tagBox作為 removeTemplate 函數的參數<small (click)="removeTemplate($event, training, tagBox);" > <small (click)="removeTemplate($event, training, tagBox);" >

在 html 上

<dx-tag-box #tagBox [items]="trainingPlan" displayExpr="name" valueExpr="id" [showSelectionControls]="true" required
    searchEnabled="true" noDataText="Ne postoji trening templato" placeholder="Izaberite trening templato"
    showClearButton="true" deferRendering="false" (onSelectionChanged)="trainingSelected($event)"
    selectAllMode="allPages" applyValueMode="useButtons">
</dx-tag-box>


<div *ngFor="let training of selectedPlans">
    <div class="py-3">
        <p> {{ training.id }} <small (click)="removeTemplate($event, training, tagBox);" > Remove </small> </p>
    </div>
</div>

在 ts

removeTemplate(e, training, tagBoxRef) {  // <-- reference
    this.existingIndex = this.selectedPlans.indexOf(training);
    this.selectedPlans.splice(this.existingIndex, 1);

    // Remove the value by index from tagBox reference.
    const displayedValue = tagBoxRef.value;
    const planIndexToRemove = displayedValue.findIndex(id => id === training.id);
    displayedValue.splice(planIndexToRemove, 1);
    tagBoxRef.value = displayedValue;
  }

工作示例： https : //stackblitz.com/edit/dropdown-fill-empty-hczvpu

解決方案2：ViewChild

在不改變removeTemplate函數參數的情況下，使用ViewChild獲取組件引用

在 html 上

• <dx-tag-box #tagBox添加模板引用到 dx-tag-box html 標簽

在 ts

• 使用 ViewChild @ViewChild("tagBox") tagBoxRef;為 tagBox 創建一個引用@ViewChild("tagBox") tagBoxRef; 將此添加到 AppComponent 之上

• 使用 this.tagBoxRef 來引用 tagBox 組件

removeTemplate(e, training) {
    this.existingIndex = this.selectedPlans.indexOf(training);
    this.selectedPlans.splice(this.existingIndex, 1);

    // Remove the value by index from tagBox reference.
    const displayedValue = this.tagBoxRef.value;
    const planIndexToRemove = displayedValue.findIndex(id => id === training.id);
    displayedValue.splice(planIndexToRemove, 1);
    this.tagBoxRef.value = displayedValue;
  }

工作示例： https : //stackblitz.com/edit/dropdown-fill-empty-s2ztmy?file=src%2Fapp%2Fapp.component.ts

Answer 2

從用戶體驗的角度來看，該功能可能不是最佳實踐。 有兩種方法來完成同樣的事情可能會導致用戶認為它仍然在框中被選中。

除非有非常具體和必要的用途，否則我會讓用戶只需點擊“x”即可刪除所選項目，因為這是常見做法。