Angular PrimeNG提供了一个可重复使用的下拉框模板组件，可在表格中使用。

以下是使用PrimeNG表格和下拉框模板组件的示例代码：

import { Component } from '@angular/core';
import { SelectItem } from 'primeng/api';

@Component({
  selector: 'app-table-component',
  template: `
    
      
        
          Id
          Brand
          Color
        
      
      
        
          {{car.id}}
          {{car.brand}}
          
            
          
        
      
    
  `
})
export class TableComponent {
  cars = [
    {id: 1, brand: 'Honda', color: 'Red'},
    {id: 2, brand: 'Toyota', color: 'Blue'},
    {id: 3, brand: 'BMW', color: 'Green'}
  ];

  colors: SelectItem[] = [
    {value: 'Red', label: 'Red'},
    {value: 'Blue', label: 'Blue'},
    {value: 'Green', label: 'Green'}
  ];
}

在这个示例中，我们使用了PrimeNG的p-table组件创建了一个简单的表格。在表格中，我们创建了一个自定义的app-dropdown组件，它使用一个下拉框作为输入和输出。下拉框的options属性设置了下拉框中的选项，而selectedValue属性设置了选定的值。当用户选择不同的值时，valueChanged事件会被触发，我们将新的值分配给相关联的汽车对象的颜色属性。

下面是我们app-dropdown组件的示例代码：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { SelectItem } from 'primeng/api';

@Component({
  selector: 'app-dropdown',
  template: `
    
  `
})
export class DropdownComponent {
  @Input() options: SelectItem[];
  @Input() selectedValue: any;
  @Output() valueChanged = new EventEmitter();
}

我们使用了PrimeNG的p-dropdown组件来创建下拉框。我们也为输入和输出创建了属性。options属性设置了下拉框选项，selectedValue属性设置了选中的值，以valueChanged事件的形式输出选择的值。

这个模板组件和上述组件可以在同一个Angular应用程序中的其他部分使用，以便在任何需要下拉框的场景中使用。 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。