Angular模态框首次点击无数据，二次点击才显示问题求助

Hey there! Let's break down why your modal isn't showing data on the first click, and fix it step by step.

The Root Cause #

Your customerService.getappnum() is an asynchronous HTTP request—meaning it takes time to fetch data from the server. Right now, you're opening the modal and calling formatdata() immediately after triggering the request, before the data actually comes back.

On the first click:

1. You trigger the HTTP request
2. The modal opens immediately (with empty/initial customer data)
3. Later, the request finishes and updates this.customer—but the modal already rendered with the old data
   On the second click:

• The previous request has already completed, so this.customer has the data from the first click, which gets displayed.

Step-by-Step Fix #

1. Update the Click Handler to Load Data First, Then Open Modal

First, change your table cell's click event to only call display()—we'll handle opening the modal once data is ready:

<td (click)="display(customer.application_num)">
  {{customer.application_num}}
</td>

2. Modify the display() Method to Wait for Data

Move the modal opening and formatdata() call inside the subscribe callback, so they only run after the data is fetched:

// First, add a ViewChild reference to your modal template in the component
import { TemplateRef, ViewChild } from '@angular/core';

export class AllcustomersComponent implements OnInit {
  // ... existing properties ...
  @ViewChild('content1') content1: TemplateRef<any>;

  // ... existing methods ...

  display(application_num: Number){
    console.log(application_num);
    this.customerService.getappnum(application_num)
      .subscribe( 
        customer => {
          this.customer = customer;
          console.log('details fetched :', this.customer);
          this.formatdata();
          // Now open the modal, since data is ready
          this.openLg(this.content1);
        },
        error => {
          console.error('Error fetching customer details:', error);
          // Add error handling here (e.g., show a toast notification)
        }
      );
  }
}

3. Ensure Child Component Receives Updated Data

Your <app-display-customer> component needs to receive the latest customer data via an @Input() binding. Update the child component:

// display-customer.component.ts
import { Input } from '@angular/core';
import { CustomerDtlsModel } from '../path-to-your-model-file';

@Component({
  selector: 'app-display-customer',
  templateUrl: './display-customer.component.html'
})
export class DisplayCustomerComponent {
  @Input() customer: CustomerDtlsModel;
}

Then update the modal template to pass the customer to the child component:

<div class="modal-body">
  <app-display-customer [customer]="customer"></app-display-customer>
</div>

Why This Works #

By waiting for the HTTP request to complete (inside the subscribe callback) before opening the modal and running formatdata(), you ensure that this.customer has the fresh data when the modal renders. The @Input() binding makes sure the child component gets the updated data immediately.

Bonus Tips #

• Double-check that your CustomerDtlsModel properties match the keys returned by your API (case sensitivity matters!)
• Add loading state feedback (e.g., a spinner) while the data is fetching, so users know something's happening.

内容的提问来源于stack exchange，提问作者Mohit Aggarwal