在回调中初始化变量时遇到未定义属性的困难

Question

我在NodeJS中有一个API rest Server，使用express Framework与我的Angular7制作的Front进行通信。服务器存储和发送一些分数对象的模型是正面和背面相同的。

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

错误类型错误：无法设置未定义的属性"userScore">
ERROR类型错误：不能读取未定义的"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");