角度 - 数据在第一次点击时不显示在模态上，但在第二次点击时显示

Question

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

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

};

我的模态：

<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' })};

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

Answer 1

您需要通过以下方式手动触发模态的更改检测：modal.ChangeDetectorRef.detectChanges()当您的模态被打开时。动态组件(您正在使用模态做什么(有时就是这种情况。因此，您可以返回可以订阅的流中的元素，然后执行以下操作：

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

Answer 2

请尝试

modal.ChangeDetectorRef.markForCheck()

它对我有用。