Question

我在NodeJS中有一个带有Express Framework的API rest服务器，可以与我用Angular7制作的Front通信。服务器存储并发送一些得分对象，模型的正面和背面都是相同的。

问题是我遇到以下错误的问题：

ERROR 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：数字，
    userScore：得分
  } = {};

这是由于代码如何反编译为Javascript。看一下这个Typescript代码：

  class Greeter {
    contentScores：{
        highScore：字符串，
    };
    构造函数（消息：字符串）{
        this.contentScores.highScore =消息；
    }
}

let greeter =新的Greeter（“ world”）;

它将变成此Javascript代码：

  var Greeter = / ** @class * /（function（）{
    功能Greeter（message）{
        this.contentScores.highScore =消息；
    }
    返回Greeter;
}（））;
var greeter =新的Greeter（“ world”）;

如您所见， this.contentScores 并未在任何地方初始化。

另一方面，如果将其创建为空对象，则会对其进行正确初始化：

  class Greeter {
    contentScores：{
        highScore：字符串，
    } = {};
    构造函数（消息：字符串）{
        this.contentScores.highScore =消息；
    }
}

let greeter =新的Greeter（“ world”）;

成为

  var Greeter = / ** @class * /（function（）{
    功能Greeter（message）{
        this.contentScores = {};
        this.contentScores.highScore =消息；
    }
    返回Greeter;
}（））;
var greeter =新的Greeter（“ world”）;

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

1 个答案: