某些数据未在 Angular 项目中显示

Answer 1

您能否为我提供更多代码，以便获得更好的想法。 根据您的描述和代码，该问题似乎与 PrimeNG 延迟加载表的更改检测和初始化计时有关。

// table.component.ts
import { Component, OnInit, AfterViewInit, ChangeDetectorRef, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
import { finalize } from 'rxjs/operators';

interface Lead {
  id: string;
  leadId: string;
  businessName: string;
  businessEntity: string;
  contactPerson: string;
  city: string;
  sourcedBy: string;
  createdOn: Date;
  leadInternalStatus: string;
}

@Component({
  selector: 'app-business-loan-table',
  templateUrl: './business-loan-table.component.html'
})
export class BusinessLoanTableComponent implements OnInit, AfterViewInit {
  @ViewChild('leadsTable') leadsTable: Table;
  
  leads: Lead[] = [];
  totalLeadsCount: number = 0;
  loading: boolean = true;
  businessNameToSearch: string = '';
  selectedLeadStatus: any;
  selectedSoucedByStatus: any;
  
  constructor(
    private leadsService: LeadsService,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    // Initial setup
    this.initializeFilters();
  }

  ngAfterViewInit() {
    // Trigger initial load after view initialization
    setTimeout(() => {
      this.loadLeads({
        first: 0,
        rows: 10
      });
    });
  }

  private initializeFilters() {
    // Initialize any default filter values
    this.selectedLeadStatus = null;
    this.selectedSoucedByStatus = null;
    this.businessNameToSearch = '';
  }

  loadLeads(event: any) {
    this.loading = true;
    
    const filters = this.getFilters();
    const pageIndex = event.first / event.rows;
    const pageSize = event.rows;

    this.leadsService.getLeads(pageIndex, pageSize, filters)
      .pipe(
        finalize(() => {
          this.loading = false;
          this.cdr.detectChanges();
        })
      )
      .subscribe({
        next: (response: any) => {
          this.leads = response.data;
          this.totalLeadsCount = response.total;
          
          // Ensure table state is updated
          if (this.leadsTable) {
            this.leadsTable.totalRecords = response.total;
          }
        },
        error: (error) => {
          console.error('Error loading leads:', error);
          this.leads = [];
          this.totalLeadsCount = 0;
        }
      });
  }

  private getFilters() {
    return {
      businessName: this.businessNameToSearch,
      leadStatus: this.selectedLeadStatus?.name,
      sourcedBy: this.selectedSoucedByStatus?.name
    };
  }

  filterWithBusinessName() {
    if (this.leadsTable) {
      this.resetTableAndLoad();
    }
  }

  statusChange(event: any) {
    this.resetTableAndLoad();
  }

  inputValueChangeEvent(type: string, value: string) {
    // Handle input change events if needed
    if (type === 'loanId') {
      // Implement any specific handling
    }
  }

  applyConfigFilters(event: any, type: string) {
    this.resetTableAndLoad();
  }

  private resetTableAndLoad() {
    if (this.leadsTable) {
      this.leadsTable.first = 0;
      this.loadLeads({
        first: 0,
        rows: this.leadsTable.rows || 10
      });
    }
  }

  // Helper methods for the template
  getSourceName(sourcedBy: string): string {
    // Implement your source name logic
    return sourcedBy;
  }

  getStatusName(status: string): string {
    // Implement your status name logic
    return status;
  }

  getStatusColor(status: string): { textColor: string; backgroundColor: string } {
    // Implement your status color logic
    return {
      textColor: '#000000',
      backgroundColor: '#ffffff'
    };
  }

  actionItems(lead: Lead): any[] {
    // Implement your action items logic
    return [];
  }

  viewLead(id: string) {
    // Implement view logic
  }

  updateLead(id: string) {
    // Implement update logic
  }
}