Не удается прочитать свойство неопределенной передачи значения LocalStorage для просмотра компонента Angular 7

Question

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

Что я делаю не так?

ModifyView.Component.TS

    export class ModifyViewComponent {

  @Input() ActionMenuLines: ActionMenuLine[];
  @Input() currentAction: Action;
  @Input() currentUser: User;
    close: any;
    viewData: any;
    viewTag: number;
    action: any;
    dataSource: ViewDataSource;
    fetchedData: any;
    primaryTableValue: any;
    defaultSortCol = '1';



  constructor(public dialog: MatDialog, private actionService: ActionService) {}

  // tslint:disable-next-line: use-life-cycle-interface
  ngOnInit() {
    this.initData();
  }

  initData() {
    const action = JSON.parse(localStorage.getItem('DbrAction'));
    console.log(action);
  }
}

ModifyView.Component. HTML

    <div>
    <mat-card class="view-settings-descrpition-card">
      <mat-card-header>
      </mat-card-header>
      <mat-card-content>
        <p>{{action.ActionName}}</p>
      </mat-card-content>
      </mat-card>
</div>

Answer 1

Объявите глобальную переменную класса и обновите ее следующим образом:

export class ModifyViewComponent {

  dbrAction: any;
  // ... other parts of code

  // tslint:disable-next-line: use-life-cycle-interface
  ngOnInit() {
    this.initData();
  }

  initData() {
    this.dbrAction= JSON.parse(localStorage.getItem('DbrAction'));
    console.log(this.dbrAction);
  }
}

В HTML используйте эту переменную:

<div>
    <mat-card class="view-settings-descrpition-card">
      <mat-card-header>
      </mat-card-header>
      <mat-card-content>
        <p> {{ dbrAction.ActionName }}</p>
      </mat-card-content>
      </mat-card>
</div>

Надеюсь, это решит вашу проблему ...

Answer 2

Удалите const и попробуйте с помощью this.action = JSON.parse(localStorage.getItem('DbrAction'));