从输入按钮和列表中删除项目？

编程问答 2022-06-07

问题描述

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

当前事件。

当我从下拉菜单中选择一些项目并在输入按钮中从侦听器中的已删除项目中的“删除”按钮上将其删除时，好像仍然处于选中状态（从输入中）

我知道原因。因为当我单击按钮并调用该函数时，我不会在选择时触发，并且没有removeItems。

问题是否可以删除按钮上的所选项目（功能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) 
  }

解决方法

我们当然可以删除显示的值。为此，我们需要引用dx-tag-box组件。我介绍两种方式。

解决方案1：模板参考

  • <dx-tag-box #tagBox 将模板引用添加到dx-tag-box html标签
  • 发送tagBox作为removeTemplate函数的参数 <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,tagBox);" > Remove </small> </p>
    </div>
</div>

在ts 

removeTemplate(e,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

使用ViewChild无需更改removeTemplate函数的参数即可获取组件引用

在html上

  • <dx-tag-box #tagBox 将模板引用添加到dx-tag-box html标签

在ts

  • 使用ViewChild为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

,

从用户体验的角度来看，该功能可能不是最佳实践。有两种方法可以完成相同的操作，可能会使用户认为它仍在框中。

除非有非常具体且必要的用法，否则我将让用户只需单击“ x”以删除所选项目，因为这是常见做法。

angulardevextremedevextreme-angularhtmljavascript