首页 文章

Angular - 第一次单击时不会在Modal上显示数据,但在第二次单击时会显示

提问于
浏览
1

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

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

如果您需要更多详细信息,请与我们联系 . 我是棱角分明的新手,非常感谢你的帮助 .

1 回答

  • 1

    当您的模态已打开时,您需要手动触发模态的ChangeDetection: modal.ChangeDetectorRef.detectChanges() . 动态组件有时会出现这种情况(您使用模态执行的操作) . 因此,您可以返回您可以订阅的流中的元素,然后执行以下操作:

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

相关问题