Angular 防止多次呼叫服务

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

<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 

  }

然后将myList绑定到弹出组件html中的select 所有这些都很好

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

当用户反复单击add时，是否可以避免多次服务调用

我尝试将从api返回的数据值设置为一个变量，该变量被赋值，但在按钮上单击它总是空的

---

请输入任何内容。

您可能可以在表单组件中检索

myList

的数据，然后将其作为数据传递到

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

在初始化过程中，修改主组件以调用
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
中删除网络调用。
Ngonit是我弹出组件的一部分，其中的服务调用获取所有数据，并将其绑定到我的选择下拉列表，该下拉列表是我的弹出组件的一部分。每次单击add按钮时，都会调用my popup组件OnInit中的服务调用。我想避免在我们获得myList变量中的数据后调用api。因此，一旦用户选择了一些数据，他们可能会回来选择/取消选择更多数据
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: '' });
}