Angular 角度-数据在第一次单击时不显示在模式上，但在第二次单击时显示

我有一个显示屏，所有客户详细信息都以表格形式显示。单击任一行时，该客户的详细信息应显示在显示模式中。我已成功单击显示模态。但令我惊讶的是，第一次点击并没有填充数据。数据在第二次单击时显示。为了进行调查，我将日志放在不同的地方，并在第一个实例上从数据库中获取数据，但不知道为什么不填充它

@Component({
    selector: 'app-allcustomers',
    templateUrl: './allcustomers.component.html',
    styleUrls: ['./allcustomers.component.scss'],
    providers: [CustomerService, Sorter],
    animations: [routerTransition()]
})
export class AllcustomersComponent implements OnInit {
customers: CustomerDtlsModel[];
customer= new CustomerDtlsModel();
persDetailsModel = new PersDetailsModel();
addcustomer = new CustomerModel();
advancedPagination: number;
application_num: Number;

getall(){
    this.customerService.getall()
    .map(
        customers => this.customers = customers,
        error => this.errorMessage = <any>error
       )
       .subscribe(
           res => {}
       );
        }

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();

};

@组件({
选择器：“应用程序所有客户”，
templateUrl:“./allcustomers.component.html”，
样式URL:['./allcustomers.component.scss']，
提供者：[客户服务，分拣机]，
动画：[routerTransition（）]
})
导出类AllCustomerComponent实现OnInit{
客户：CustomerDtlsModel[]；
customer=新CustomerDtlsModel（）；
persDetailsModel=新的persDetailsModel（）；
addcustomer=新CustomerModel（）；
高级分页：编号；
申请编号：编号；
getall（）{
this.customerService.getall（）
.地图(
customers=>this.customers=customers，
error=>this.errorMessage=错误
)
.订阅(
res=>{}
);
}
显示（应用程序编号：编号）{
console.log（应用程序数量）；
this.customerService.getappnum（应用程序编号）
.订阅(
customer=>this.customer=customer
);
console.log（'获取的详细信息：'，this.customer）；
这是formatdata（）；
};

我的情态：

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

                    <!-- Modal for display customer -->
                    <ng-template id="display-modal" #content1 let-c="close" let-d="dismiss">
                        <div class="modal-header">
                            <h4 class="modal-title">Customer Details</h4>
                            <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <app-display-customer></app-display-customer>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" (click)="c('Close click')">Confirm</button>
                            <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
                        </div>
                    </ng-template>


openLg(content) {
    this.modalService.open(content, { size: 'lg' })};

{{customer.application_num}
客户详细信息
&时代；
证实
接近
openLg（内容）{
open（内容，{size:'lg'}）；

---

如果您需要更多详细信息，请告诉我。我是angular的新手，非常感谢您的帮助。

您需要在打开模态后使用：

modal.ChangeDetectorRef.detectChanges（）

手动触发模态的变更检测。动态组件有时会出现这种情况（您正在使用modals执行的操作）。因此，您可以在流中返回您可以订阅的元素，然后执行以下操作：

modal.open(...).subscribe((modal) => modal.ChangeDetectorRef.detectChanges);

提供