Question

我有父级组件：

...
<mdb-select
    [options]="optionsModel"
    (selected)="setSelectedOption($event, 'device_model')"
    placeholder="Choose model"
    >
</mdb-select>
...
<app-crashes-list
    [queryParams]="queryParams"
    >
</app-crashes-list>
...

还有ts：

...
public queryParams: {device_model?: string, officer_id?: string} = {};
...
public setSelectedOption(selectedOption: OptionType, key: string): void {
    if (selectedOption.value === 'all models' || selectedOption.value === 'all QCs') {
      delete this.queryParams[key];
    } else {
      this.queryParams[key] = selectedOption.value;
    }

    this._restService.getCounterDeviceList(this.queryParams).subscribe(
      (data: {[key: string]: number}) => {
        this.tests.testOK = data.nondefective_phones;
        this.tests.testNOK = data.defective_phones;
        this.tests.testTOTAL = data.all_phones;
      },
      (error) => {
        console.error(error);
      }
    );
  }
...

我还有子项崩溃列表组件：

...
@Input() private queryParams: {device_model?: string, officer_id?: string};
...
ngAfterContentChecked() {
  console.dir(this.queryParams);
}
...

我的期望：每次我在选择组件中手动选择新选项时，都会在控制台中收到新消息。我的结果是：我在第二个不间断的控制台中看到4-5次新消息。 WIDW？

Answer 1

在ngOnChanges生命周期挂钩中移动console.dir。

ngOnChanges(changes: SimpleChanges) {
  if (changes[queryParams]) {
    console.log(changes[queryParams].currentValue)
  }
}

ngAfterContentChecked checkint连续更改

1 个答案: