My task involves extracting data from a JSON object and displaying the difficultyLevel.
Despite several attempts, I have been unable to achieve the desired outcome. What changes should be made to the HTML file?
const ELEMENT_DATA: data = {
questions: [
{
difficultyLevel: 'easy',
isOptionAvailable: true,
isImageAvailable: false,
imageUrl: '',
questionType: 'e',
maximumMarks: 20,
timeToSolve: 12,
questionId: 2,
topicName: 'xs',
classInfo: {
classId: 10,
className: '6',
},
subjectInfo: {
subjectName: 'English',
subjectId: 3,
},
Interface
interface data {
questions: Question[];
message: string;
status: string;
}
interface Question {
difficultyLevel: string;
isOptionAvailable: boolean;
isImageAvailable: boolean;
imageUrl?: string;
questionType: string;
maximumMarks?: number;
timeToSolve: number;
questionId: number;
topicName: string;
classInfo: ClassInfo;
subjectInfo: SubjectInfo;
boardInfo: BoardInfo;
images: any[];
options: Option[];
}
What I'm trying:
<mat-form-field class="drop-down" appearance="fill">
<mat-label>--Difficulty Level--</mat-label>
<mat-select [(ngModel)]="selectedValue" name="food">
<mat-option *ngFor="let diff of " [value]="diff.questionId">
{{ diff.difficultyLevel }}
</mat-option>
</mat-select>
</mat-form-field>
Unfortunately, this implementation is not functioning as expected. How can I correctly specify the mat-option in this context?