Angular防止多次调用服务答案

【问题标题】：Angular prevent calling service multiple timesAngular防止多次调用服务
【发布时间】：2020-02-23 21:14:32
【问题描述】：

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

<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 中的选择以上所有都可以正常工作。

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

是否可以避免每次用户点击添加时多次服务调用。

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

请输入任何内容。

【问题讨论】：

上面的 Ngonit 是我的弹出组件的一部分，其中的服务调用获取所有数据并将其绑定到我的选择下拉列表，这是我的弹出组件的一部分。每次单击添加按钮时都会调用我的弹出组件 OnInit 中的服务调用。一旦我们在 myList 变量中获取数据，我想避免对 api 的后续调用。
所以一旦用户选择了一些数据，他们可能会回来选择/取消选择更多

标签： angular

【解决方案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 中删除网络调用。

【讨论】：

【解决方案2】：

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

【讨论】：