1
resposta

[Dúvida] [Angular+Primeng] - Filtro de select numa coluna filtravel em uma tabela do PrimeNG

Olá, pessoal alguém poderia me tirar uma duvida sobre o PrimeNG + Angular, estou tentando criar apenas um "Select" que apresenta uma listagem de opções que o usuário pode selecionar para poder filtrar as informações da coluna, porém quando eu inicializo a aplicação ele não exibe o select apenas um input de texto, alguém saberia me orientar o motivo?. Está é a coluna da minha tabela:

<th>
            <p-columnFilter 
                [matchMode]="'equals'"
                [showMenu]="false"
                field="nome"
            >
                <ng-template #filter let-selectedValue let-filter="filterCallback">
                    <p-select
                        [(ngModel)]="selectedValue"
                        [options]="statuses"
                        (onChange)="filter($event)"
                        placeholder="Select One"
                        [showClear]="true"
                        style="min-width: 12rem"
                        >
                        <ng-template let-option #item>
                            <p-tag [value]="option.value" />
                        </ng-template>
                        </p-select>
                </ng-template>
            </p-columnFilter>
        </th>

e este é meu typescript:

import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { Table, TableModule } from 'primeng/table';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-lista-aluno',
  standalone: true,
  imports: [TableModule,
            CommonModule,
            MensagemCarregamentoComponent
        ],
  schemas: [NO_ERRORS_SCHEMA], 
  templateUrl: './lista-aluno.component.html',
  styleUrl: './lista-aluno.component.css'
})
export class ListaAlunoComponent {

    statuses=[
        { label: 'Ana', value: 'Ana' },
        ...
    ]

    // Dados simulados para exemplo'
    customers = [
        { nome: 'João', idade: 30 },
        ...
    ];

    isLoading: boolean = false;

    ngOnInit() {
        ...
    }

    clear(table: Table) {
        table.clear();
    }
    
}
1 resposta

Olá Anderson! Tudo bem?

Parece que você está enfrentando um problema comum ao tentar integrar o p-select dentro de um p-columnFilter no PrimeNG. A questão principal aqui é que o p-select precisa estar corretamente configurado dentro do template de filtro do p-columnFilter.

  1. Verifique a Importação do Módulo: Certifique-se de que o módulo DropdownModule do PrimeNG está importado no seu módulo Angular, pois o p-select depende dele. Você pode fazer isso adicionando DropdownModule ao array de imports.

    import { DropdownModule } from 'primeng/dropdown';
    
    @NgModule({
      imports: [
        TableModule,
        CommonModule,
        DropdownModule,
        // outros módulos
      ],
      // ...
    })
    
  2. Verifique o Template de Filtro: O ng-template que você está usando para o filtro deve estar corretamente configurado. O #filter no ng-template deve corresponder ao filterCallback que você está usando. Certifique-se de que o ng-template está dentro do p-columnFilter.

  3. Verifique as Dependências: Certifique-se de que todas as dependências do PrimeNG e Angular estão atualizadas e compatíveis entre si. Às vezes, versões conflitantes podem causar comportamentos inesperados.

  4. Exemplo Prático:

    <th>
      <p-columnFilter 
        [matchMode]="'equals'"
        [showMenu]="false"
        field="nome"
      >
        <ng-template pTemplate="filter" let-filter>
          <p-dropdown
            [(ngModel)]="selectedValue"
            [options]="statuses"
            (onChange)="filter($event.value)"
            placeholder="Select One"
            [showClear]="true"
            style="min-width: 12rem"
          >
          </p-dropdown>
        </ng-template>
      </p-columnFilter>
    </th>
    

Espero que essas dicas ajudem a resolver o problema com o p-select no seu projeto. Para mais informações, recomendo muito que consulte a documentação do dropdown no PrimeNG.

Bons estudos e boa sorte com o desenvolvimento do seu CRUD em Angular!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓