PrimeNG p-orderList 禁用多项选择答案

【问题标题】：PrimeNG p-orderList disable multiple selection of itemsPrimeNG p-orderList 禁用多项选择
【发布时间】：2019-04-17 01:36:31
【问题描述】：

我正在使用 PrimeNG 的 p-orderList。默认情况下，metaKeySelection 属性为 true，这意味着需要按下 metaKey(ctrl key) 才能选择多个项目。我宁愿寻找一种完全禁用选择多个项目的方法。我应该只能在有序列表中选择一项。 p-orderList 没有可用的 metaKey 属性。谁能帮我解决这个问题？

<p-orderList [value]="policyList" [listStyle]="{'min-height':'calc(100vh - 325px)'}" (onSelectionChange)="onSelectionChange($event)">
  <ng-template let-policy pTemplate="policy">
    <span>{{policy}}</span>
  </ng-template>
</p-orderList>

PS：每次从有序列表中选择项目时都会触发onSelectionChange($event)。 $event.value 包含项目的数组。

【问题讨论】：

请更正您的标记！阅读所有标签，看看你实际上没有使用哪个标签

标签： html angular primeng

【解决方案1】：

它没有简单的标志，但可以通过调用一个函数来实现，该函数基本上只用原始选定的行替换整个选择数组。您将需要一个变量来存储先前的值以进行比较。

  onSelectionChange(event) {
    if (event.value.length === 1) {
      this.tempValue = event.value[0];
    }
    else {
      event.value = [this.tempValue];
    } 
  }

也可以通过将 event.value 传递给函数来简化

(onSelectionChange)="onSelectionChange($event.value)">

【讨论】：

【解决方案2】：

metaKeySelection 输入属性呢？（如图here）

<p-orderList [metaKeySelection]="false" [value]="policyList" [listStyle]="{'min-height':'calc(100vh - 325px)'}" (onSelectionChange)="onSelectionChange($event)">
  <ng-template let-policy pTemplate="policy">
    <span>{{policy}}</span>
  </ng-template>
</p-orderList>

【讨论】：

[metaKeySelection] 仅启用一个或多个元素的切换。如果它是真的（默认情况下），您将能够选择一个项目但需要 ctrl 键来选择多个项目。如果 metaKeySelection 为 false，则默认可以选择多个项目。我想避免这种情况。
嗯，我不认为你能做到这一点，你可以在这里看到：github.com/primefaces/primeng/blob/master/src/app/components/… orderlist 只处理多项选择。您可以尝试扩展 orderlist 组件并创建自己的组件。 stackoverflow.com/questions/44519015/…