1

我正在尝试从我的 QuizService 中获取字符串变量 explainText 的值，以使用数据绑定显示在我的 di-quiz 组件模板中。选择答案时，console.log 显示未定义的说明文本，并且模板的数据绑定未显示任何说明文本。请参阅：https ://stackblitz.com/edit/angular-9-quiz-app

知道为什么这不起作用吗？请你帮忙。谢谢！

在我的quiz.service.ts文件中，我有：

@Injectable({providedIn: 'root'}) {
  export class QuizService {
  explanationText: string;
  ...

  setExplanationAndCorrectAnswerMessages() {
    this.question = this.getQuestion;
    if (this.question) {
      if (this.correctAnswers.length === 1) {
        this.explanation = ' is correct because ' + this.question.explanation + '.';
      }
      if (this.correctAnswers.length > 1) {
        this.explanation = ' are correct because ' + this.question.explanation + '.';
      }
    }

    if (this.correctAnswers && this.correctAnswers.length === 1) {
      const correctAnswersText = this.correctAnswers[0];
      this.explanationText = 'Option ' + correctAnswersText + this.explanation;
      console.log(this.explanationText);
      this.correctAnswerMessage = 'The correct answer is Option ' + this.correctAnswers[0] + '.';
      console.log(this.correctAnswerMessage);
    }
    if (this.correctAnswers && this.correctAnswers.length > 1) {
      if (this.correctAnswers[0] && this.correctAnswers[1]) {
        const correctAnswersText = this.correctAnswers[0] + ' and ' + this.correctAnswers[1];
        this.explanationText = 'Options ' + correctAnswersText + this.explanation;
        console.log(this.explanationText);
        this.correctAnswerMessage = 'The correct answers are Options ' + correctAnswersText + '.';
        console.log(this.correctAnswerMessage);
      }
      ...
    }
  }

在我的di-quiz.component.ts中，我有一个 getter/setter 和构造函数，如下所示：

get explanation(): string { return this.quizService.explanationText; };
@Input() set explanation(value: string) { this.explanationText = value; };

constructor(private quizService: QuizService,
            private timerService: TimerService,
            private route: ActivatedRoute) {
  this.explanationText = this.explanation;
  console.log("ExpTxt: " + this.explanationText);
}

在我的di-quiz.component.html中，我有

<section id="question" [class.answered]="answer">
  <span *ngIf="!answer">{{ question?.questionText }}</span>
  <span *ngIf="answer">{{ explanationText }}</span>
</section>
4

2 回答 2

2

像这样更改上面的构造函数，

constructor(
  private quizService: QuizService,
  private timerService: TimerService,
  private route: ActivatedRoute
  ) {
     this.explanation = 'Text you want';
     this.explanationText = this.explanation;
     console.log("ExpTxt: " + this.quizService.explanationText);
}
于 2020-04-05T05:14:46.050 回答
2

我检查了您的 stackblitz 代码并发现了问题。这是因为您在 DependencyInjectionQuizComponent 和 QuestionComponent 中注册 QuizService，这会创建多个实例。

因此，当问题组件触发setExplanationAndCorrectAnswerMessages时，它会在不同实例中更新解释文本，但您的 DIQuizComponent 期望来自不同实例。

要解决此问题，您必须从 QuestionComponent 提供程序中删除 QuizService。

我已经分叉并更新了代码。这是链接

于 2020-04-08T16:55:54.007 回答