p-multiSelect onchange 防止添加具有相同索引的元素

Posted 2023-02-22

【中文标题】p-multiSelect onchange 防止添加具有相同索引的元素

【英文标题】：p-multiSelect onchange prevent adding elements with the same index

【发布时间】：2022-01-23 03:51:47

【问题描述】：

我有来自数组的 6 个选项的多选选项。其中一个选项与其他选项有点不同（它允许添加备注，而其他选项则不允许）。当我选择此选项和其中一个字段 x（备注）时，在我删除它并再次选择后，但该字段将为空（假设在第一种情况下我正在添加 reark，而在第二次我不是) 所以多选会添加两次！但我希望每个索引都有 1 个变量（不关心其他字段）。我应该怎么做？另一个不同的地方是从服务器获取选定的值，什么时候应该在用户选择了它，似乎他没有选择。

  <p-multiSelect *ngIf="_decision.decisionStatusId == eDecisionType.Reject || _decision.decisionStatusId == eDecisionType.ReturnedToUser" [required]="formGroup.hasError('remark-reasons-required')"
                   [options]="reasons" defaultLabel="" formControlName="remarks" [(ngModel)]="selectedReasons" optionLabel="hebName"
                   [ngClass]="_decision.decisionStatusId == eDecisionType.ReturnedToUser || _decision.decisionStatusId == eDecisionType.Reject ? '' : 'display-none'"
                   selectedItemsLabel="0 "
                   (onChange)="onChangeReasonsValue($event)"></p-multiSelect>

.ts

onChangeReasonsValue(event:  value: ReviewDecisionReasonModel[] ): void 
    this.selectedReasons = event.value;
    this._decision.reasons = event.value;
    this.formGroup.markAsDirty();
    this.formGroup.markAsTouched();
    this.formGroup.updateValueAndValidity();
  

same index values

【问题讨论】：

Ylove，删除[(ngModel)]（您可以不在同一标签中使用[ngModel]和formControlName）。我真的不明白你想做什么。 p-multiselect 将一个包含所有选定值的数组作为值。你不需要使用(onchange)。只需在 .html 中使用form?.value|json 来检查值

@Eliseo 谢谢，但在删除选定的情况下，我需要更新我的数组值，如果不进行更改，它不会完美发生。我的问题是多选让我用相同的键检查\取消选中对象。在第一次对象是键，x。移除 x 使其与 x,y 保持一致（因为我没有移除 y）然后当再次按下 x,w 时我将获得 x 两次。你明白吗？ （我在问题中添加了图片）

【参考方案1】：

关于您的代码

你有一个*ngIf =condition 和[ngClass]=同样的条件？'':'display-none'`。所以你可以删除 [ngClass] -allways is fullfilled

您正在使用事件(onChange) 为变量selectedReasons 和_decision.reasons 赋值。看到 event.value 是一个数组，所有的对象都在多选中被选中。

你已经有[(ngModel)]="selectedReasons"，所以不需要使用onChange事件

您有一个 formControlName="remark"。我看不到您的 FormGroup。此外，您可以不在同一标签中使用 formControlName 和 ngModel。也许你想使用事件 onChange 来做一些类似的事情：

onChangeReasonsValue(event:  value: ReviewDecisionReasonModel[] ): void 
    this.formGroup.get('mark'.setValue(event.value)

？ （但请记住删除代码中的 formControlName）

对不起，我看不懂[required]="formGroup.hasError('remark-reasons-required')"

【讨论】：

首先，非常感谢你的回答，我会尽量集中我的问题，我试过你写的但没有解决，因为问题不是显示问题。我删除了 ngModel。会发生什么我有多选选项列表。在一个选项中，我应该添加另一个字段备注字段。所以在第一次选择时添加这个字段。但是在删除选择时，它不会从数组中删除此选择，因为我没有删除备注字段。

所以当再次选择此选项时，将添加两次相同的索引（一个带有备注字段，一个带有备注字段）我只需要在数组中没有此索引时才需要设置值跨度>