在 Angular HTML table 中获取重复数据 (PrimeNG)

Question

如果有一个数据，它将只显示一个原始数据。如果有两个数据则显示前几行，如果有数据则显示九行。我认为我的 component.ts 文件是问题所在。

数据来自 laravel（后端）

项目列表。component.ts

import { NgStyle } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { Project } from '@root/shared/classes/project';
import { DataService } from '@root/shared/services/data.service';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.scss']
})
export class ItemListComponent implements OnInit {

  projects:any;

  project = new Project();

  constructor(private dataService:DataService) { 

  }

  ngOnInit(): void {
    this.getProjectsData();

  }

  //get project data into the table
  getProjectsData() {
    this.dataService.getProjectData().subscribe(res => {
      this.projects = res;
    })
  }
}

itemlist.component.html

<p-table [value]="projects" styleClass="p-datatable-gridlines" responsiveLayout="scroll" scrollHeight="17.8vw">
  <ng-template pTemplate="header">
    <tr>
      <th style="text-align: center;" translate>itemlist.customer <br> itemlist.name</th>
      <th style="text-align: center;" translate>itemlist.project <br> itemlist.name</th>
      <th style="text-align: center;" translate>itemlist.business <br> itemlist.divition</th>
      <th style="text-align: center;" translate>itemlist.rank</th>
      <th style="text-align: center;" translate>itemlist.order <br> itemlist.amount</th>
      <th style="text-align: center;" translate>itemlist.customer <br> itemlist.area</th>
  </ng-template>
  <ng-template pTemplate="body"> 
    <tr *ngFor="let pjt of projects">
      <td style="text-align: center;">{{ pjt.customer_name }}</td>
      <td style="text-align: center; width: 15vw;">{{ pjt.project_name_jp }}</td>
      <td style="text-align: center;">{{ pjt.business_divition }}</td>
      <td style="text-align: center;">{{ pjt.rank }}</td>
      <td style="text-align: center;">{{ pjt.order_amount }}</td>
      <td style="text-align: center;">{{ pjt.customer_area }}</td>
    </tr>
  </ng-template>
</p-table>

Answer 1

删除 *ngFor="let pjt of projects" 并使用 let 变量。

<ng-template pTemplate="body" let-pjt>
  <tr>
    ...
  </tr>
</ng-template>

Sample Solution on StackBlitz

参考资料

Table Templating | PrimeNG

在 Angular HTML table 中获取重复数据 (PrimeNG)

Getting duplicate data in Angular HTML table (PrimeNG)

html

laravel

typescript

primeng

angular

参考资料