Проблема с загрузкой асинхронных данных в форму и последующей отправкой - PullRequest
Новая
       34

Проблема с загрузкой асинхронных данных в форму и последующей отправкой

0 голосов
/ 12 октября 2018

В моем приложении есть компонент с именем redirectComponent, который просто вызывается и создается из других компонентов приложения путем вызова маршрута, в котором он находится (http://localhost:4200/redirect/).

После вызова redirectComponent он делает 2 вызоваAPI для загрузки некоторых данных, связанных с формой в шаблоне, после загрузки данных я получаю доступ к форме через ViewChild и отправляю ее (метод POST), затем работа этого компонента завершается, и я возвращаюсь к корневому URL:к сожалению, даже если данные из API разрешены, связанные данные формы не обновляются и отправляются с неопределенными значениями.

Фрагмент TYPESCRIPT: 

export class RedirectComponent implements AfterViewInit {
  userName: string;
  sessionToken: string;
  sessionDuration: string;
  loggedUserNavigationUrl: string = 'someUrl.com';

  @ViewChild('microgameform')
  microgameForm: ElementRef;

  constructor(private thirdPartyGameService: ThirdPartyGameService) { }

  async ngAfterViewInit(): Promise<void> {
    await this.redirectUserToThirdPartyGame();
  }

  async redirectToThirdParty(): Promise<void> {
    this.sessionDuration = '51';

    const gameToken: GameToken = await this.thirdPartyGameService.getGameToken();
    this.sessionToken = gameToken.Token;

    const nickNameResponse: NickName = await this.thirdPartyGameService.getNickname();
    this.userName = nickNameResponse.NickName;

    this.microgameForm.nativeElement.submit();
    this.router.navigateByUrl('/');
  }
}

Фрагмент HTML:

<form #microgameform name="MicrogameForm" [action]="loggedUserNavigationUrl" method="POST" target="_blank">
    <input type="hidden" name="Username" [value]="userName"/>
    <input type="hidden" name="SessionToken" [value]="sessionToken"/>
    <input type="hidden" name="SessionDuration" [value]="sessionDuration"/>
</form>

теперь, когда я использовал console.log (), чтобы увидеть каждую переменную непосредственно перед this.microgameForm.nativeElement.submit();, я обнаружил, что все переменные были загружены, но не привязаны к форме, вот результат, который я получил:

переменные и значения формы перед отправкой

я думаю, что что-то упустил, мне нужнополучить данные из API, а затем отправить их в форму с помощью метода post. Возможно, у меня возникли проблемы с расой, но я не могу понять, я пытался вызвать перенаправление с разных хуков жизненного цикла (например,: ngAfterViewInit) но я получаю разные ошибки ...

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

проблема была связана с некоторым параллелизмом между этими строками:

this.microgameForm.nativeElement.submit ();this.router.navigateByUrl ('/');

navigateByUrl, по неизвестной причине, удаляет значения из формы или, что еще хуже, удаляет форму из html-документа, поэтому решением было добавить html-формук документу из машинописного кода и отправьте форму оттуда.

0 голосов
/ 12 октября 2018

Действительно, вам нужно использовать .subscribe() для ваших асинхронных вызовов: 

this.thirdPartyGameService.getNickname().subscribe( data => {
    this.sessionToken = data.Token;
});

, если вы попытаетесь зарегистрировать this.sessionToken вне вашей подписки, оно будет неопределенным: 

this.thirdPartyGameService.getNickname().subscribe( data => {
    this.sessionToken = data.Token;
    // Operations with the Token
});
// this.sessionToken not loaded yet => undefined
...