在回调变量初始化期间未定义的属性困难

Question

我在用的NodeJS谁与我正面采用Angular7取得沟通快递框架的API REST服务器。服务器存储和发送一些分数对象模型是一样的正面和背面双面。

问题是我现在面临与以下错误的问题：

错误类型错误：未定义无法设置属性“userScore” 错误类型错误：无法读取的未定义的属性“排行榜” 错误类型错误：无法设置的未定义的属性“排行榜”

我的部件，其中该错误出现：

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
  } = {};

代码是如何transcompiled为Javascript这是因为。看看这个打字稿代码：

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");