选择多个值应按间隔触发一次服务

Question

我有一个材质下拉框，如下所示，带有选择事件（selectionChange）：

<mat-select #segmentSelector [formControlName]="filter.VAL" multiple placeholder="Select" (selectionChange)="someMethod($event.value, filter.VAL)">
     <div class="custom-panel">
         <ng-container *ngFor="let option of getFilterDropdownOptions(filter.VAL)">
             <mat-option *ngIf="!!option"  [value]="option" [value]="option">
                 {{ option }}
             </mat-option>
         </ng-container>
     </div>
     <footer class="select-box-footer">
         <a class="select-box-footer-btn" (click)="$event.preventDefault();segmentSelector.close();">Done</a>
     </footer>
 </mat-select>

这工作正常，因为每当我更改下拉列表中的值时就会触发它，如下所示：

someMethod(val: any, columnName: any) {
console.log(val);

    var obj = val as [];

    if (columnName === "CUST_ID") {
      this.aLogData.customerId = [];

      for (var i = 0; i < obj.length; i++) {
        console.log(obj[i]);

        this.aLogData.customerId.push(obj[i]);
      }
    }

    if (columnName === "CUST_NAME") {
      this.aLogData.customerName = [];

      for (var i = 0; i < obj.length; i++) {
        console.log(obj[i]);

        this.aLogData.customerName.push(obj[i]);
      }
    }

    var searchLocationInput = ((document.getElementById("searchLocationInput") as HTMLInputElement).value);
    console.log(this.aLogData);
    console.log(searchLocationInput);

    this.aLogData.searchItem = searchLocationInput;
    this.statusTwo = true;

    setTimeout(() => this.delaySomeMthod(this.aLogData), 10000); //Trying to delay to send data once
  }

  delaySomeMthod(aLogData: LogData) {
    console.log("Called after 10 secs.");
    this.locationService.setLogData(aLogData).subscribe();
  } 

现在的问题是，每当我选择或更改下拉列表中的数据时，它都会被触发并每次调用控制器。我试图设置一个计时器来完成这项工作，但似乎我需要检查一次并以一定的时间间隔向控制器发送请求。

所以我的要求是多次使用下拉框选择或更改值，但在一定时间（例如 10 秒）后调用服务或控制器一次，因为我正在向数组中添加数据。这是可行的吗？

Answer 1

好的，这是一个可能的解决方案的概念：

1. 在类级别引入新变量：

• intervalCallsService

  ：（间隔）设置为空；

• newSelectedData

  ：集合、数组或对象（取决于下拉列表中选择的值的类型）；

2. 创建

   callServiceAndHandleData

   方法：

• 首先它将调用以

  newSelectedData

  作为参数的服务，
• 然后它将清除

  newSelectedData

  （或将其设置为空），
• 最后会将

  intervalCallsService

  设置为 null；

3. 下拉更改方法：

• 收到的值将添加到

  newSelectedData

  [见底部：重要];
• 检查

  intervalCallsService

  是否为空：如果是，则启动它（设置为间隔10秒，将调用

  callServiceAndHandleData

  方法；

所以，这就是场景：

1. 您更改下拉值，新值将添加到

   newSelectedData

   （atm，它是第一个也是唯一的元素），并且由于这是下拉列表第一次更改，因此它将触发

   intervalCallsService

   （将创建间隔）。

2. 间隔开始运行/计数。

3. 如果再次更改下拉列表，

   newSelectedData

   将获得另一个元素，但由于

   intervalCallsService

   不为空，因此不会再次启动。

4. 当interval达到计数结束时，将触发

   callServiceAndHandleData

   方法，该方法将通过服务发送

   newSelectedData

   ，使

   intervalCallsService

   无效并清除

   newSelectedData

   。

5. 因此，当用户再次更改下拉值时，转到 1。

重要：仅当新值尚不存在时才将新值添加到

newSelectedData

：如果值是原始值，则 Set 将是比数组更好的选择，但如果它不是原始值，则对象将是更好的选择，如果您不是完全动态 - 您可以拥有与每个下拉列表相对应的对象键，这样您就可以确保每个下拉列表的值仅作为相应键的值添加一次。