Question

我有一个按钮，会打开一个弹出窗口，用户可以在其中选择一些数据并将其添加到我的表单中。

<button type="button" class="btn btn-info btn-sm" aria-hidden="true" (click)="addData()"> Add Data</button>

   addData() {
    this.bsModalRef = this.modalService.show(PopupComponent,
      { initialState: { createForm: this.createForm }, ignoreBackdropClick: true, animated: true, keyboard: true, class: '' });

      //some code to save below
      //this.bsModalRef.content.onSave 

  }

上面打开一个弹出窗口，用户选择一些数据并按保存。

在我的弹出组件中，有这个：

 ngOnInit() {
        this.myService.getData().subscribe((data: any[]) => {
          this.myList = data.map(a => [{ name: a.name }][0]);  
        },
        (error: any) => {
           console.log(error);
        });
   }

然后我将myList绑定到我的弹出组件html中的select 以上所有方法都可以正常工作。

问题是，当用户单击“添加数据”时，它会打开弹出窗口并再次调用我的服务。

每当用户单击一次添加一次时，是否可以避免多次服务调用。

我尝试将api返回的数据值设置为一个已分配的变量，但在按钮上单击其始终为空。

请输入任何内容。

Answer 1

每次打开模态时，都会从头开始对其进行初始化。由于您在模式的ngOnInit上有服务调用，因此每次都会调用它。您可以更改逻辑以从主要组件调用myService.getData，然后将其传递给每次单击 Add Data 按钮的模式。

修改您的主要组件以调用myService并将结果存储在myList中。另外，修改您的addData()方法以将此值和initialState传递给模态。

ngOnInit(){    
    this.myService.getData().subscribe((data: any[]) => {
      this.myList = data.map(a => [{ name: a.name }][0]);  
    },
    (error: any) => {
       console.log(error);
    });
}

addData() {
    this.bsModalRef = this.modalService.show(PopupComponent,
    { initialState: { createForm: this.createForm, myList: this.myList }, ignoreBackdropClick: true, animated: true, keyboard: true, class: '' });
}

现在，模态中的myList已经从主要组件传递了所需的数据，并且可以从模态的ngOnInit中删除网络调用。

Answer 2

您可能可以在表单组件中检索myList的数据，然后将其作为数据传递到Dialog中。

Angular阻止多次调用服务

2 个答案: