Angular 10 — изменить порядок выполнения в AfterViewInit при использовании подписки

У меня есть этот хук жизненного цикла ngAfterViewInit:

ngAfterViewInit() {
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

    this.subscription = this.dataService.dataChanged
      .subscribe(
        () => {
          this.getData();
        }
      );

    this.getData();
  }

Я хочу, чтобы подписка выполнялась до this.getData() вне подписки, и только если этого не произошло, я хотел бы, чтобы выполнялся this.getData() вне подписки.

Как я могу это сделать? Помещение его в ngOnInit не работает, потому что это таблица с разбивкой на страницы, которая работает только после отображения страницы. Мне нужно иметь подписку, когда пользователь добавляет новые данные в таблицу, и я хочу, чтобы они были видны автоматически.

Отредактировано Если я запускаю код, как написано выше, то при первом переходе на страницу мои данные правильно загружаются в мою разбитую на страницы таблицу с сервера. Затем пользователь может добавить новый элемент данных, используя форму, которая находится в другом компоненте. Когда пользователь закончит добавлять новый элемент, он вернется к этой таблице. Как это выглядит сейчас, таблица сначала загружается без нового дополнения, а затем перезагружается с новым дополнением. Я хотел, чтобы первая загрузка не была видна пользователю, чтобы при переходе назад он сразу видел правильные данные.


typescript angular subscription angular-material angular10
person tired_but_inspired    schedule 16.08.2020    source источник
comment
когда вы используете подписку, выполнение является асинхронным, поэтому вы не можете предсказать, будет ли оно выполнено до или после кода вне подписки. Почему бы вам просто не удалить последнюю строку? строка this.getData в подписке будет выполняться каждый раз, когда ваш наблюдаемый dataChanged будет выдавать значение   -  person Gauthier T.    schedule 16.08.2020
comment
@GauthierT., проблема в том, что если я удалю эту последнюю строку, метод getData() никогда не будет вызываться, потому что подписка создается только после того, как пользователь вручную добавляет данные в мой источник данных. Какие-нибудь мысли?   -  person tired_but_inspired    schedule 17.08.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вам необходимо изменить поток своего кода, поскольку подписки являются асинхронными.

 private callGetData: boolean

 ngAfterViewInit() {

    this.callGetData = true;

    this.sort.sortChange.subscribe(() => {
       this.paginator.pageIndex = 0;
       if(this.callGetData) this.getData();
       this.callGetData = false;
    })

    this.subscription = this.dataService.dataChanged
      .subscribe(
        () => {
          this.getData();
        }
      );
  }

Таким образом, вы будете вызывать getData() только после того, как ngAfterViewInit() будет выполняться не каждый раз, когда подписка получает событие.

или вы можете убрать флаг, если хотите getData() и внутри подписки.

Надеюсь, что это работает!

person Ajeet Eppakayala    schedule 16.08.2020
comment
прежде всего, спасибо. Теперь проблема в том, что подписка на dataChanged не всегда генерируется, поэтому при первом переходе на эту страницу данные с сервера просто не приходят. Он выдается только после добавления нового элемента данных. Любые идеи? - person tired_but_inspired; 17.08.2020
comment
Испускается ли sortChange()? И не могли бы вы, пожалуйста, отредактировать вопрос и объяснить больше, что нужно? - person Ajeet Eppakayala; 17.08.2020
comment
sortChange() не выдается до тех пор, пока данные не будут загружены. Данные загружаются только в том случае, если запущен метод this.getData(), но в этом случае он никогда не запустится. Сейчас я собираюсь отредактировать свой вопрос, чтобы он содержал лучшее объяснение. - person tired_but_inspired; 17.08.2020
comment
Я отредактировал свой вопрос - надеюсь, он поможет лучше понять, чего я хочу. - person tired_but_inspired; 17.08.2020
comment
когда добавляется новая запись, вы можете просто добавить ее в строки таблицы вашей таблицы (после завершения добавления записи). если его обновить, вы можете взять id и заменить строку новыми данными. - person Ajeet Eppakayala; 17.08.2020
comment
Спасибо. К сожалению, я так и не смог заставить подписку вызываться, что бы я ни делал. - person tired_but_inspired; 18.08.2020