PrimeNG p-chips仅删除

Question

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

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

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

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

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