仅删除 PrimeNG p 芯片

Question

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

当 selecting 多 select 列表的值时，我的 p-chips 已满。我想通过写入p-chips来禁用添加数据。

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

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

Answer 1

没有内置方法可以执行此操作。您可以向组件添加一个仅删除属性以使其按您想要的方式运行。

Answer 2

你可以使用 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

仅删除 PrimeNG p 芯片

PrimeNG p-chips delete only

angular

primeng