5

问题的基本前提如下：

我有一个带有各种（自定义）输入的组件，当这些输入值中的任何一个发生变化时，我对 API 端点进行 HTTP 调用以重新计算我的受众范围，即它是一个 Campaign 系统，并且当用户定义受众人口统计时受众“覆盖面”的变化。

我使用 ngModelChanges 触发呼叫，效果很好。

但是，我的问题是，当组件加载现有数据（来自以前的保存）时，它会填充导致 ngModelChange 触发的输入，从而导致我的 HTTP 调用在页面加载时多次触发。

示例 HTML：

<app-custom-input
        id="age-from"
        name="age-from"
        [(ngModel)]="audienceModel.ageFrom"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>
<app-custom-input
        id="age-to"
        name="age-to"
        [(ngModel)]="audienceModel.ageTo"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>

注意：我的自定义输入确实实现了ControlValueAccessor

.ts 文件：

calcReach() {
    if (!this.loading$.getValue()) {
      const filters = {
        ...this.audienceModel,
        audienceFileId: this.campaignService.campaign.audienceFileId
      };
      this.calcAudienceReach$ = this.campaignService.calcAudienceReach(filters).subscribe((reach: number) => {
        console.log('calc audience reach: ', reach);
      });
    }
  }

可以看出，我确实尝试使用在 ngOnInit() 结束时设置为 false 的加载指示器，但由 ngModelChange 触发的调用都发生在（或之前？）OnInit 之后。

我有一个我的组件实现的抽象组件，其中加载指示器定义为：

public loading$: BehaviorSubject<boolean> = new BehaviorSubject(true);

即它的初始值设置为 true（在抽象组件中），并且仅在 ngOnInit 结束时更改为 false（在实际组件中）。

4

0 回答 0