Angular PrimeNG提供了许多UI组件，包括表格、表单、下拉框等等。下面介绍一下如何在表单中使用下拉框组件，并添加自定义内容。

首先，我们需要安装PrimeNG依赖和添加相关模块：

npm install primeng --save
npm install primeicons --save

然后，在需要添加下拉框的组件中，导入相关模块：

import { SelectItem } from 'primeng/api';
import { DropdownModule } from 'primeng/dropdown';

为方便起见，我们可以将下拉框中的选项封装成一个数组，方便后续添加自定义内容。这里以男女选项为例：

genderOptions: SelectItem[] = [
  {label: '男', value: 'male'},
  {label: '女', value: 'female'}
];
selectedGender: string; // 选中的值

接着，在HTML文件中添加下拉框组件：

此时，下拉框中就会显示男女选项。如果需要添加自定义内容，我们可以在options中添加一个对象，设置label和value属性即可，例如：

genderOptions: SelectItem[] = [
  {label: '男', value: 'male'},
  {label: '女', value: 'female'},
  {label: '自定义项', value: 'custom'}
];

但是这样会出现一个问题：当选中自定义项时，下拉框不会自动显示对应的内容。为了解决这个问题，我们需要在下拉框中添加模板来显示自定义内容。

修改HTML文件中下拉框的代码如下：

  
    {{option.label}}
    
  

这里使用了PrimeNG的模板语法，在ng-template中定义了一个名为item的模板，然后在下拉框中用[item]属性绑定这个模板。

模板中的let-option语法表示将当前选项传递给模板，然后根据选项的值显示对应的内容。当选项的值为custom时，显示一个输入框，用于输入自定义内容。

需要注意的是，我们需要在组件中定义一个customOption属性，用于保存用户输入的自定义内容。

customOption: string;

这样，我们就实现了在PrimeNG表单下拉框中添加自定义内容的功能。 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。