Я пытаюсь получить значение строковой переменной descriptionText из моего QuizService для отображения в моем шаблоне компонента 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 У меня есть геттер / сеттер и конструктор следующим образом:
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>