Question

我使用primeNG的p-chip和Angular 2。 https://www.primefaces.org/primeng/#/chips

选择多选列表的值时，我的p-chips被填充。我想通过写入p-chip来禁用数据添加。

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

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

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文件中

stackblitz：https://stackblitz.com/edit/angular-mugxwj?file=styles.css

PrimeNG p-chips只删除

2 个答案: