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