时间戳

首页 > 解决方案 > 发送到子组件的输入值错误

angular - 发送到子组件的输入值错误

问题描述

我有两个组件“YearComponent”和“StatPeriod”组件。在我的 YearComponent 中，我这样调用 StatPeriod： <app-save-stat-period [dateBegin]="dateBegin" [dateEnd]="dateEnd" byMonth bestNAverage></app-save-stat-period>

我有一个选择输入来选择一年： <mat-select [(value)]="yearSelected" (selectionChange)="dateChange()" placeholder="Année">

yearSelected 变量以这种方式管理

get dateBegin() {
    return moment()
      .year(this.yearSelected)
      .startOf('year')
      .format('YYYY-MM-DD');
  }

  get dateEnd() {
    return moment()
      .year(this.yearSelected)
      .endOf('year')
      .add(1, 'days')
      .format('YYYY-MM-DD');
  }

通过上面的代码，您可以看到 dateBegin() 和 dateEnd() 在我的双向绑定 yearSelected 更改时更新。

他是我使用的函数 dateChange() ：

dateChange(): void {
    this.statPeriod.reloadAverageBest(this.dateBegin, this.dateEnd);
  }

this.statPeriod 是用这个 ViewChild 创建的： @ViewChild(StatPeriodComponent, { static: false }) statPeriod: StatPeriodComponent;

reloadAverageBest() 方法描述如下：

reloadAverageBest(dateBegin: string, dateEnd: string) {
    this.getStat(dateBegin, dateEnd);
    this.getCalls();
    this.getSaves();
  }

我不明白的是，当我将 yearSelected 从 2020 年更改为 2019 年时，例如，我对我的 api 进行了 2020 年而不是 2019 年的调用。当我将其更改为 2018 年时，它调用 2019 年，然后当我再次回到 2019 年或 2020 年，它称为 2018 年。

所以似乎 StatPeriodComponent 是用之前选择的年份而不是我实际选择的年份来刷新的。

你知道这里发生了什么吗？

问候

标签： angular

解决方案

有时需要时间来反映双向绑定。意味着selectionChange回调发生在两种方式出价更新之前。

你能试试下面的选项吗？

Change your select input
<mat-select [(value)]="yearSelected" (selectionChange)="dateChange($event)" placeholder="Année">

更改您的dateChange功能以接受参数

dateChange({value}): void {
    //here value will point to latest year
    <<use value to convert dateBegin and dateEnd>>
}

第二种选择

为什么直接调用子函数？您正在传递给您的子组件，您可以使用dateBegin生命周期事件并调用 API。dateEndonChange

推荐阅读