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

Question

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

当前事件。

当我 select 下拉菜单中的一些项目并在名为 'Remove' 的按钮上删除它们时，在输入按钮中从侦听器中删除的项目看起来好像是仍然 select 编辑和检查（来自输入）。

我知道原因。因为当我单击按钮并调用函数时，我不会触发 selection 并且没有 removedItems。

问题是否可以删除按钮上 selected 的项目（函数 removeTemplate ）并在我的输入中删除它？

我正在使用 devExreme 组件，里面有 removedItems 方法，但我需要删除并单击按钮。

代码在这里：

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

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

上课

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

使用 ViewChild 获取组件引用而不更改 removeTemplate 函数的参数

在 html

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

上课

使用 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

Answer 2

从用户体验的角度来看，该功能可能不是最佳做法。有两种方法来完成同一件事可能会导致用户认为它仍然在框中被选中。

除非有非常具体和必要的用途，否则我会让用户只需点击“x”即可删除所选项目，因为这是常见做法。

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

Remove item from input button and from list?

html

javascript

devextreme

angular

devextreme-angular

解决方案 1：模板引用

解决方案 2：ViewChild