Отображение информации Angular 6

Question

Я пытаюсь сделать приложение викторины. Мне нужно отображать список вопросов последовательно, а не как список. Я не могу отображать {{question}}, потому что он не определен до тех пор, пока сервис не заработает. Как это сделать правильно?

questionform.component.ts

import { Component, OnInit } from '@angular/core';
import {Question} from "../question";
import {questionService} from "../question.service";

@Component({
  selector: 'app-questionform',
  templateUrl: './questionform.component.html',
  styleUrls: ['./questionform.component.css']
})
export class QuestionformComponent implements OnInit {

  questions: Question[];
  question: string = this.question[0].question;

  constructor(private questionService: QuestionService) { }

  ngOnInit() {
    this.getQuestions();
  }

  getQuestions(): void{
    this.questionService.getQuestions().subscribe(questions => this.questions = questions);
  }

}

questionform.component.html

<p>{{question}}</p>
<button onClick()="next()">next</button>

Answer 1

Проблема с информацией, которую вы пытаетесь показать, состоит в том, что не возникает вопросов при инициализации компонента и выполнении question: string = this.question[0].question.

Если вы хотите сохранить первый вопрос внутри question, вам нужно добавить эту строку также в методе subscribe, например:

getQuestions(): void{
    this.questionService
        .getQuestions()
        .subscribe(questions => {
            this.questions = questions;
            this.question = this.questions[0].question;
         });
}

Таким образом, вы можете быть уверены, что данные есть, когда вы инициализируете свои данные.

Надеюсь, это поможет!