Трудности с неопределенными свойствами при инициализации переменной в обратном вызове

Question

У меня есть сервер API отдыха в NodeJS с Express Framework, который взаимодействует с моим Front, созданным с помощью Angular7.Сервер хранит и отправляет несколько объектов партитуры, модель одинакова спереди и сзади.

Проблема в том, что у меня возникают проблемы со следующими ошибками:

ОШИБКА TypeError: Невозможноустановить свойство 'userScore' из неопределенногоОШИБКА TypeError: Невозможно прочитать свойство 'highScore' из неопределенногоОШИБКА TypeError: Невозможно установить свойство 'highScore' из неопределенного

Мой компонент, в котором появляется ошибка:

import {AfterViewInit, Component, ElementRef, HostListener, OnInit, 
ViewChild} from '@angular/core';
import {ScoreService} from './services/score.service';
import {Score} from './models/score';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {
  contentScores: {
    highScore: number,
    userScore: Score
  };
  scroll: boolean;
  badgeHidden: boolean;
  private yOffSet: any;

  @ViewChild('navbar') navElement: ElementRef;

  constructor(private score: ScoreService) {
    this.scroll         = false;
    this.badgeHidden    = true;
  }

  ngOnInit(): void {
    this.score.getHighScore().subscribe( score => {
      console.log('Score value: ' + score.score);
      console.log('Object: ' + score);
      this.contentScores.highScore = score.score;
    });
    this.score.getScoreOnIp().subscribe( score => {
      console.log('Score value: ' + score.score);
      console.log('Object: ' + score);
      this.contentScores.userScore = score;
    });
  }

  ngAfterViewInit(): void {
    this.yOffSet = this.navElement.nativeElement.offsetTop;
  }

  onClickReset(): void {
    console.log('----------INFO------------');
    console.log(this.contentScores.highScore);
    console.log(this.contentScores.userScore.score);
    console.log(this.contentScores.userScore._id);
    console.log('--------------------------');
    this.score.deleteScore(this.contentScores.userScore._id);
  }

  @HostListener('window:scroll', ['$event'])
  onWindowScroll(): void {
    const currYOffset = window.pageYOffset;

    if (this.yOffSet < currYOffset) {
      this.scroll = true;
    } else {
      this.scroll = false;
    }
  }
}

и расположение в представлении при вызове переменных:

<p class="dropdown-item-text">Le meilleur score enregistré est actuellement: <span class="warn-content">{{ contentScores.highScore }}</span></p>
            <p class="dropdown-item-text">Votre meilleur score est: <span class="warn-content">{{ contentScores.userScore.score }}</span></p>

Я не понимаю, почему я не могу создать экземпляр объекта, неопределенного со значением в вызове API.Обратите внимание, что console.log отображает значение, поэтому это не проблема для восстановленных данных, проблема заключается в объявлении моего объекта, хранящего значения.

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

Answer 1

contentScores не был инициализирован.

Если вы инициализируете его с пустым объектом, он будет работать

contentScores: {
    highScore: number,
    userScore: Score
  } = {};

Это связано с тем, как код транслируется в Javascript.Посмотрите на этот код Typescript:

class Greeter {
    contentScores: {
        highScore: string,
    };
    constructor(message: string) {
        this.contentScores.highScore = message;
    }
}

let greeter = new Greeter("world");

Он станет таким кодом Javascript:

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.contentScores.highScore = message;
    }
    return Greeter;
}());
var greeter = new Greeter("world");

Как видите, this.contentScores нигде не инициализируется.

С другой стороны, если вы создадите его как пустой объект, он будет правильно инициализирован:

class Greeter {
    contentScores: {
        highScore: string,
    } = {};
    constructor(message: string) {
        this.contentScores.highScore = message;
    }
}

let greeter = new Greeter("world");

становится

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.contentScores = {};
        this.contentScores.highScore = message;
    }
    return Greeter;
}());
var greeter = new Greeter("world");