Почему данные из localstorage отображаются при переходе на другую страницу со 2 раза?

Question

[Alertoso]

Мне необходимо передать данные при переходе на другую страницу и сразу же отобразить их, я использую передачу данных благодаря localstorage, но я не понимаю, почему данные отображаются лишь со 2 раза.

Это main.component.ts:

import {Component, Input} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {IMetric} from "./metric";
import {Router} from "@angular/router";

@Component({
  selector: 'home-app',
  template: `
      <div class="box" >
        <p class="nameOfTheMetric">Halstead metric</p>
        <textarea class="input_text" type="text" [(ngModel)]="code"></textarea>
        <button (click)="goCalculate()" class="shine-button">Calculate the metric</button>
      </div>
  `
})
export class MainComponent {
  code: string = "";

  constructor(private http: HttpClient, private router: Router){ }
  goCalculate(){
     this.http.post<IMetric>("https://localhost:5001/api/Helstead", this.code)
       .subscribe(
         (data) => {localStorage.setItem('key', JSON.stringify(data))},
       );
    this.router.navigate(['/metric']);
   };

}

А это metric.component.ts:

import {Component, Input} from '@angular/core';
import {Router} from "@angular/router";

@Component({
  selector: 'about-app',
  template: `
      <div class="box">
        <p class="resultOfTheMetric">Results of the Halstead metric</p>
        <table class="tableOfOperators">
          <caption class="nameOfTheTableOfOperators">Operators</caption>
          <tbody>
          <th>Value</th>
          <th>Number of repetitions</th>
          </tbody>
        </table>
        <table class="tableOfOperands">
          <caption class="nameOfTheTableOfOperands">Operands</caption>
          <tbody>
          <th>Value</th>
          <th>Number of repetitions</th>
          </tbody>
        </table>
        <button (click)="goBack()" id="btn" class="shine-button">Go back</button>
      </div>
      <b>{{retrievedObject.numOfUniqueOperands}}</b>
    `
})
export class MetricComponent {
  retrievedObject = JSON.parse(<string>localStorage.getItem('key'));

  constructor(private router: Router){}
  goBack(){
    this.router.navigate(['']);
  }

}

Comments

[Sleeper_king_of_bones]

goCalculate(){
     this.http.post<IMetric>("https://localhost:5001/api/Helstead", this.code)
       .subscribe(
         (data) => {localStorage.setItem('key', JSON.stringify(data))},
         this.router.navigate(['/metric']);
       );
   };

Вот так ваш код будет работать.

Answer 1

[Алексей]

Отправка запроса на сервер это асинхронная операция, а вы делаете переход на "/metric" сразу же после начала отправки запроса, не дожидаясь его выполнения. Поэтому вначале осуществляется переход на другой роут, а потом записываются данные в localStorage, следовательно они и начинают отображаться после повторного захода на "/metric"

Answer 2

[MamaLuyba]

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