重新加载浏览器后在设置商店中的最小最大日期之后，Ngx-bootstrap内联日期选择器将停止工作

编程问答 2022-07-21

问题描述

我是Angular的新手，我在这个问题上坐了很长时间。

为实现上下文化，每次加载页面时，应用程序都会调用微服务，以使用ngrx表单检索数据并存储状态，以使用户看到的内容始终与数据库数据保持同步。

我有一个ngx-bootstrap内联日期选择器，可以从中选择多个日期。我开发的解决方案在应用程序的正常流程中可以正常运行，但是如果刷新浏览器，日期选择器将停止工作（不再调用BSValueChange）。

我知道的事情：

  • 当页面重新加载时，在将'form'数据加载到其状态（因此是否检查是否为null）之前，我将值分配给最小和最大日期的地方初始化了；

  • 此外，我知道Angular不会在浏览器重新加载时破坏组件。我遇到一个问题，其中a无法重新分配像这样的this.myArray = []数组，并且发现了一种解决方法，将所有项目拼接成空数组，我想this article解释了为什么。因此，也许initDate和endDate不会在重新加载时销毁并引起某些问题（？）。

  • 在加载“表单”后（刷新时）已正确分配了最小日期，但是日期选择器中断了。

这是我的代码：

  <bs-datepicker-inline 
    [bsValue]="dateSelected" 
    (bsValueChange)="onValueChange($event)"
    [dateCustomClasses]="dateCustomClasses" 
    [bsConfig]="config" 
    [minDate]="initDate" 
    [maxDate]="endDate">
    </bs-datepicker-inline>

export class SorteioPersonalizadoSelectorComponent implements OnInit {

  initDate: Date;
  endDate: Date;
  notifier = new Subject();

  constructor(private localeService: BsLocaleService,private store: Store<{form: FormGroupState<RootForm>,sorteio: FormGroupState<Sorteio>}>) {
  }

  ngOnInit() {
    defineLocale('pt-br',ptBrLocale);

    this.config = Object.assign({},{
      locale: 'pt-br',showWeekNumbers: false,useUtc: false
    });

    window.onbeforeunload = () => {
        this.notifier.next();
        this.notifier.complete();
    };

    this.store.pipe(select(state => state.form),takeuntil(this.notifier)).subscribe(form => {
      if (form != null && form.value.id !== '') {

         //dataInicio and dataFim are stored in state as string values in the format 'yyyy/MM/dd'
         this.initDate = new Date(form.value.participationPeriod.dataInicio);
         this.endDate = new Date(form.value.participationPeriod.dataFim);

       }
    });
 
  }

}

有人知道为什么会这样吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularjavascriptngrxngx-bootstrap