使用 p-inputgroup 挑战的 PrimeNG 芯片组件答案

【问题标题】：PrimeNG Chips component using p-inputgroup challenge使用 p-inputgroup 挑战的 PrimeNG 芯片组件
【发布时间】：2022-12-11 12:42:17
【问题描述】：

首先，我的代码仅使用 String 来定义电子邮件，但需要使用多个值而不是一个 String[]。我使用 PrimeNG 14.2.x 结合 Angular 14 作为前端。始终使用文本输入组没有问题，但不知何故它不能很好地与 p-chips 组件一起使用。

    <div class="p-col-12 p-md-4">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
        <input type="text" pInputText placeholder="Email" name="recipientEmails">
      </div>
    </div>

结果： browser view - ok

修改后我有

    <div class="p-col-12 p-md-4">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
        <p-chips allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
      </div>
    </div>

结果： browser view - failed

从这一点来看，p-chips 不再有用了。用户看不到添加的内容。我卡住了，有什么想法吗？

我试过直接修改css

.p-chips {
  width: 100%;
}

但这没有帮助

【问题讨论】：

标签： javascript angular primeng

【解决方案1】：

好的，我现在已经通过使用 bootstrap 解决了这个问题

<div class="p-col-12 p-md-4">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text"><em class="pi pi-envelope"></em></div>
    </div>
    <p-chips placeholder="Emails" allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
  </div>
</div>

result

我希望它能帮助别人

【讨论】：