Question

无法使用bsModalRef绑定模型弹出组件中的数据

是否有解决此问题的方法来处理模型弹出窗口中的数据？

itemSummaryResult=[];

showItemSummaryModal(id: number) 
{ 

 this.serverResultsService.getItemDetails(id).subscribe(
  data => {
    this.itemSummaryResult['ItemList'] = data['data'];
  },
  err => { console.log(err); }

);
 this.bsModalRef = this.modalService.show(ItemDetailComponent, { class: 'modal-lg' });
 this.bsModalRef.content.data = this.itemSummaryResult;
}

模型组件如下

itemList=[];

constructor(
public bsModalRef: BsModalRef)

ngOnInit() { 
setTimeout(() => {     
  this.itemList= this.bsModalRef.content.data['ItemList'];        
  }, 1000); 
}

尝试从模型组件分配/获取数据时未获取数据

console.log（“ ItemList”，this.bsModalRef.content.data ['ItemList']）

Answer 1

您可以在show配置中调用initialState方法时传递数据，如下所示：

   this.bsModalRef = this.modalService.show(ItemDetailComponent, {
      initialState: {
        itemList: this.itemSummaryResult
      },
      class: 'modal-lg'
    });

然后，您可以在itemList中使用ModalComponent。您不再需要setTimeout

更新

您的代码中还有另一个问题。您正在使用subscribe执行异步操作。因此，您需要在show的回调关闭中调用subscribe方法。

itemSummaryResult=[];

showItemSummaryModal(id: number) 
{ 

 this.serverResultsService.getItemDetails(id).subscribe(
  data => {
    this.itemSummaryResult['ItemList'] = data['data'];

    this.bsModalRef = this.modalService.show(ItemDetailComponent, {
      initialState: {
        itemList: this.itemSummaryResult // Or should it be "this.itemSummaryResult['ItemList']" ?
      },
      class: 'modal-lg'
    });
  },
  err => { 
    console.log(err); 
  }

 );
}

模态组件BsModalRef没有绑定到ngOnInit中

1 个答案: