使用 PrimeNG DataView 显示数据？

Question

我正在使用 Angular17 开发一个个人项目，我想使用 PrimeNG 组件 DataView 显示数据库中的项目。到目前为止一切顺利，我在

app.module

中进行了导入，并向服务请求提供数据。问题是数据未显示在 DataView 中，但分页正常（显示 3 页数据（11 项））。我与副驾驶交谈，他建议我使用 Table 而不是 DataView。它适用于表，但不适用于 DataView。有人有什么想法吗？

有些内容是用葡萄牙语输入的 - BR，因为这是我的母语，而且是一个个人项目。

编辑客户端.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> 

编辑-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)
    });
  }

console.log(this.dados)

在我的控制台中显示全部数据（11 个）。

Fila.ts

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

一个有趣的问题是 Table 运行良好并且完美地显示了内容。但我想使用DataView。

edit-client.HTML（表格）

  <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>

我尝试过使用

*ngFor

，它显示数据，但一次显示所有数据。我想每页显示 5 个。

Answer 1

从代码片段中我看到的问题是您没有使用

*ngFor

。它应该是这样的

<p-dataView #dv [value]="dados" [rows]="5" [paginator]="true">
  <ng-template let-collection pTemplate="list">
    <div class="col-12" *ngFor="let item of collection;">{{item.name}}</div>
  </ng-template>
</p-dataView>

我假设您尝试在

ng-template

内迭代

dados

而不是从

let-client

传入的日期，所以这就是分页对您不起作用的原因。

如果我们检查 primeNg 源代码，我们可以找到以下内容

      <div class="p-dataview-content">
                <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: paginator ? (filteredValue || value | slice : (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value }"></ng-container>

                <div *ngIf="isEmpty() && !loading">
                    <div class="p-dataview-emptymessage">
                        <ng-container *ngIf="!emptyMessageTemplate; else empty">
                            {{ emptyMessageLabel }}
                        </ng-container>
                        <ng-container #empty *ngTemplateOutlet="emptyMessageTemplate"></ng-container>
                    </div>
                </div>
            </div>

我们可以看到

itemTemplate

正在获取完整的集合，因此我们应该在其中迭代每个项目。如果您有兴趣检查该库的源代码，可以在这里找到它：prmieNG github