0

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

当前发生。

当我从下拉菜单中选择一些项目并在输入按钮中从侦听器中删除的一个名为“删除”的按钮上删除它们时，它看起来好像仍然被选中并选中（来自输入）。

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

问题是否可以删除按钮上的选定项目（函数 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) 
  }
4

2 回答 2

0

当然我们可以删除显示的值。为此，我们需要获取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>

在 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

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

于 2020-10-20T15:46:45.567 回答
0

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

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

于 2020-10-20T15:48:15.557 回答