使用PrimeNG Chips时，如何在HTML中调用TypeScript数组？

步骤1：在组件TS文件中定义天数数组 #

把重复的标签文本提取到数组中，后续维护只需修改数组即可：

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

步骤2：在HTML中用循环批量渲染Chip组件 #

借助Angular的*ngFor指令遍历数组，自动生成所有p-chip组件，彻底消除重复代码：

<p-chip 
  *ngFor="let day of days" 
  [label]="day" 
  styleClass="p-mb-2 p-mr-2 custom-chip"
></p-chip>

注意：你示例中写的<p-chips>是PrimeNG的多值输入芯片组件，和单个标签的<p-chip>并非同一组件。如果只是要批量渲染独立的标签芯片，采用上述循环<p-chip>的方式即可。

内容的提问来源于stack exchange，提问作者Tim Kruger