如何在 PrimeNG Chips 组件中动态渲染 TypeScript 数组-html教程-PHP中文网

本文详解如何将 TypeScript 字符串数组绑定到 PrimeNG 的组件，通过 *ngFor 指令实现动态渲染，替代硬编码的重复标签，提升代码可维护性与可扩展性。

本文详解如何将 typescript 字符串数组绑定到 primeng 的 `` 组件，通过 `*ngfor` 指令实现动态渲染，替代硬编码的重复标签，提升代码可维护性与可扩展性。

在使用 PrimeNG 构建 Angular 应用时，（单个芯片）和（多值输入芯片容器）常被混淆。需特别注意：您问题中意图是动态生成多个独立的元素（如“1 day(s)”、“2 day(s)”等），而非使用表单控件——后者用于用户可编辑、可增删的输入场景（如邮箱标签），其 [(ngModel)] 绑定的是一个字符串数组，但自身不接收 label 输入属性。

✅ 正确做法是：保持使用标签，并结合 Angular 的 *ngFor 指令遍历您的 days 数组：

TypeScript（组件类）

export class YourComponent {
  days: string[] = [
    '1 day(s)', '2 day(s)', '3 day(s)', '4 day(s)',
    '5 day(s)', '6 day(s)', '7 day(s)'
  ];
}

HTML（模板）

Scrapfly SDK TypeScript

使用 Scrapfly SDK（scrapfly-sdk）在 TypeScript 或 JavaScript 中进行网页抓取，用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。

下载

<div class="chip-container">
  <p-chip day of days styleclass="p-mb-2 p-mr-2 custom-chip"></p-chip>
</div>

⚠️ 注意事项：

styleClass 是 PrimeNG 的标准输入属性（非 class），用于添加 CSS 类；若使用 class，需确保样式全局生效或启用 ViewEncapsulation.None。

不支持 label 属性，它只接受 [(ngModel)] 或 formControlName 绑定数组，内部自动渲染芯片 —— 这与您需求不符。

如需交互（如点击芯片触发事件），可添加 (onClick)="onChipClick(day)"；如需禁用某项，可配合 [disabled] 输入属性。

进阶建议：若需支持选中态（例如单选天数），推荐改用或封装为自定义芯片选择器；若需用户自由输入新天数，则才应选用并配合 addOnBlur="true" 和 separator="," 等配置。

通过此方式，您不仅实现了数据驱动的 UI 渲染，还为后续国际化（如 this.days = this.translate.instant(['DAY_1', 'DAY_2', ...])）或动态配置（如从 API 加载天数范围）打下坚实基础。