I have developed a question component where I have added some predefined questions. However, when I attempt to execute the application, it displays 'undefined' text.
Below is my component code:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-question-list',
templateUrl: './question-list.component.html',
styleUrls: ['./question-list.component.css']
})
export class QuestionListComponent implements OnInit {
questions: Object[];
constructor() {
this.questions = [
{
text: 'What is your name?',
answer: 'My name is Saeef'
},
{
text: 'What is your favorite color?',
answer: 'My favorite color is blue'
];
}
ngOnInit() {
}
}
This is the HTML code for the component:
<div class="question" *ngFor let question of questions">
<div class="card">
<div class="card-header">
{{ question.text }}
</div>
<div class="card-block">
<p class="card-text">{{ question.answer }}</p>
</div>
</div>
</div>