Show data using PrimeNG DataView?

I'm developing a personal project using Angular17 and I wanted to show the items in my database using a PrimeNG component, DataView. So far so good, I made the imports in app.module and the request to the service to bring the data. The issue is that the data is not being shown in the DataView but the pagination works (it shows the 3 pages of data (11 items)). I talked to the copilot and it suggested that I would use Table instead of DataView. It worked with the table, but not with the DataView. Does anyone have any idea?

Some contents is typed in Portuguese - BR because it's my native language and it's a personal project.

edit-client.HTML

<div class="card">
<div class="content">
<p-dataView #dv [value]="dados" [rows]="5" [paginator]="true">
<ng-template pTemplate="list" let-cliente>
<div>{{cliente.nomeCliente}}</div>
<div class="fila-item" (click)="abrirModalEditarCliente(cliente)"></div>
</ng-template>
</p-dataView>
</div>
</div>


edit-client.component.ts

export class EditClientComponent implements OnInit {
dados: Fila[] = [];

constructor(private filaService: FilaService) { }
ngOnInit(): void {
this.getDataFromService();
}

getDataFromService() {
this.filaService.getDataFromDatabase().subscribe((data) => {
this.dados = data;
console.log(this.dados)
});
}


The console.log(this.dados) shows entire data in my console (11 itens).

Fila.ts

export interface Fila {
id: number;
nomeCliente: string;
}



A funny question is that Table works fine and shows the content perfectly. But I want to use DataView.

edit-client.HTML (table)

<p-table [value]="dados" [rows]="5" [paginator]="true">
<ng-template pTemplate="header">
<tr>
<th>Nome do Cliente</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-cliente>
<tr (click)="abrirModalEditarCliente(cliente)">
<td>{{cliente.nomeCliente}}</td>
</tr>
</ng-template>
</p-table>


I've tried to use *ngFor, it shows the data, but showed all data at once. I want to show 5 per page.

Continue reading...