错误：无法读取 null 的属性'find'

Question

我的应用程序出现问题。我已经将我的问题表单分为两个单独的组件，一个用于单个答案，另一个用于多个答案

我收到错误信息

"错误：无法读取null的属性"find"；

从第二个问题导航到第三个问题时。"answers"变量为空，并且答案似乎没有从问题组件传递到测验组件，也没有被推送到答案数组
这似乎影响了解释文本的显示，导航无法通过第二个问题，评分也不起作用。请看我的Stacklitz:https://stackblitz.com/edit/angular-10-quiz-app并帮助解决此问题。非常感谢。

问题组成部分：

<ng-content></ng-content>
<form [formGroup]="formGroup">
<question-single-answer [question]="question"></question-single-answer>
<question-multiple-answer [question]="question"></question-multiple-answer>
</form>

在测验组件中给出错误的代码：

checkIfAnsweredCorrectly(): void {
if (this.question) {
const correctAnswerFound = this.answers.find((answer) => {
return this.question.options &&
this.question.options[answer] &&
this.question.options[answer]['selected'] &&
this.question.options[answer]['correct'];
});
const answers = this.isAnswered() ? this.answers.map((answer) => answer + 1) : [];
this.quizService.userAnswers.push(this.isAnswered() ? answers : this.answers);
this.addUpScores(answers, correctAnswerFound);
}
}

Answer 1

在您提供的StackBlitz URL中，您似乎在开头为变量answers分配了一个空的数字数组。

稍后，this.answers到null在多个位置，如函数advanceToNextQuestion和advanceToPreviousQuestion的函数。之后，很可能会在出现此错误的地方调用checkIfAnsweredCorrectly函数。

请再次验证您的逻辑。这是一个逻辑错误。