Angular项目中PrimeNG表格列切换反向功能实现咨询

要将列切换下拉框默认设置为全未勾选状态，只需修改组件中_selectedColumns的初始值，具体操作如下：

1. 调整组件初始化逻辑 #

在ngOnInit方法里，把原本默认选中所有列的代码：

this._selectedColumns = this.cols;

替换为：

this._selectedColumns = [];

初始化后selectedColumns为空数组，对应p-multiSelect下拉框里的所有列选项都会处于未勾选状态，表格仅显示固定的Code列。

2. 修改后的完整组件代码 #

import { Component, OnInit, Input } from '@angular/core';
import { Product } from './product';
import { ProductService } from './productservice';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 
    products: Product[];
    
    cols: any[];

    _selectedColumns: any[];

    constructor(private productService: ProductService) { }

    ngOnInit() {
        this.productService.getProductsSmall().then(data => this.products = data);

        this.cols = [
            { field: 'name', header: 'Name' },
            { field: 'category', header: 'Category' },
            { field: 'quantity', header: 'Quantity' }
        ];

        // 默认不选中任何列
        this._selectedColumns = [];
    }

    @Input() get selectedColumns(): any[] {
        return this._selectedColumns;
    }

    set selectedColumns(val: any[]) {
        // 保留原始列顺序
        this._selectedColumns = this.cols.filter(col => val.includes(col));
    }
}

说明 #

• HTML部分无需修改，表格的可选列渲染完全依赖selectedColumns数组，数组为空时，*ngFor循环不会渲染可选列，仅显示固定的Code列。
• 用户勾选下拉框选项后，selectedColumns会自动更新为选中的列数组，表格会同步渲染对应列的数据。

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