Angular：如何隐藏 PrimeNG 下拉所选选项？

Question

我需要我的 p-dropdown 隐藏先前选择的选项。

例如，我有选项a，b和c。如果我先前选择了a，则仅B和C应显示在下拉列表中。然后，如果我选择b，现在只能显示 a a c 。

//component.ts
this.planOptions = [
  { name: 'A'},
  { name: 'B'},
  { name: 'C'}
]; 

//component.html
<p-dropdown id="plan_option"
  [options]="planOptions
  [(ngModel)]="selectedPlanOption"
  optionLabel="name">
</p-dropdown>       

Answer 1

您应该创建一个只包含可能选项的PlanOptions的副本

TS文件

copyOfPlanOption = planOption;
chosenOption: 'A';
const index = copyOfPlanOption.indexOf(chosenOption);
if (index > -1) {
  copyOfPlanOption.splice(index, 1);
}

HTML文件

 <p-dropdown [style]="{'minWidth':'100%', 'width': '100px', 'height':'50px'}" id="plan_option" appendTo="body" [options]="copyOfPlanOption" [(ngModel)]="selectedPlanOption" placeholder=" "  optionLabel="name"></p-dropdown>       

Answer 2

您可以将选项拼接，然后用CSS隐藏＆lt; li＆gt;。

planOptions.splice(index, 1)

然后

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
          padding: 0px;
}