PrimeNG p芯片仅删除

Question

我正在使用 Angular 2 的 primeNG 的 p 芯片。 https://www.primefaces.org/primeng/#/chips

我的p芯片在选择多选列表的值时被填充。 我想通过写入 p 芯片来禁用数据的添加。

但我想保留删除值的可能性。

可能吗？ 否则，您知道任何其他可以做到这一点的工具吗？

Answer 1

您可以使用CSS来实现它：

/* +++++++ Prime NG CHIPS +++++++ */
.ui-chips > ul.ui-inputtext,
.ui-chips > ul.ui-inputtext:focus {
border: none;
box-shadow: none;
background: none;
}
.ui-chips .ui-chips-input-token {
display: none;
}

或 SCSS：

/* +++++++ Prime NG CHIPS +++++++ */
.ui-chips {
> ul.ui-inputtext,
> ul.ui-inputtext:focus {
border: none;
box-shadow: none;
background: none;
}
.ui-chips-input-token {
display: none;
}
}

请注意，这些 CSS 规则应添加到某些全局(未封装(CSS/SCSS 文件中

斯塔克闪电战：https://stackblitz.com/edit/angular-mugxwj?file=styles.css

2022 更新我有一段时间没有检查primeng，但我看到你可以通过使用max属性来实现同样的效果：

<p-chips [max]="values?.length || 0" [(ngModel)]="values" ></p-chips>

请记住，当 max 为 0 时，您可以添加一个芯片，如果不需要，请考虑使用disabled属性禁用p-chip

Answer 2

没有内置的方式来执行此操作。 您可以向组件添加仅删除属性，以使其按所需方式运行。