Angular получить строковое значение из сервиса в компоненте - PullRequest
1 голос
/ 05 апреля 2020

Я пытаюсь получить значение строковой переменной 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>

Ответы [ 2 ]

2 голосов
/ 08 апреля 2020

Я проверил ваш код на стеке и нашел проблему. Это потому, что вы регистрируете свой QuizService в DependencyInjectionQuizComponent и QuestionComponent, который создает несколько инстах.

Таким образом, когда компонент вопроса срабатывает setExplanationAndCorrectAnswerMessages , он обновляет объяснениеText в другом экземпляре, но ваш DIQuizComponent ожидает.

Чтобы это исправить, вы должны удалить QuizService из провайдеров QuestionComponent.

Я разбудил и обновил код. Вот ссылка

2 голосов
/ 05 апреля 2020

Изменить выше конструктор, как это,

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);
}
...