Блог

Как начинающий разработчик, я пишу простое приложение для викторин, используя Angular 12, чтобы улучшить свои навыки. У меня проблема с восстановлением данных с вопросами и ответами из файла JSON. Он успешно компилируется, но в веб-браузере я не получаю никакого результата и получаю такие ошибки:

 NG0303: Can't bind to 'ngForFrom' since it isn't a known property of 'div'
NG0303: Can't bind to 'ngForFrom' since it isn't a known property of 'div'
 

В конечном результате должен появиться текст вопроса с ответами в угловых карточках материалов и удержанием события на кнопке, которая позволяет пользователю перейти к следующему вопросу, не меняя вид. Что я делаю не так, и является ли это хорошим способом сделать это и сохранить данные викторины? Или, может быть, есть какой-то лучший способ хранения данных и отображения их на картах угловых материалов.

Данные JSON:

 [
    {
        "id": 0,
        "text": "Quis sit dolor tempor fugiat fugiat culpa qui?",
        "answer_A": "CORR",
        "answer_B": "INC",
        "answer_C": "INC",
        "answer_D": "INC"
    },
    {
        "id": 1,
        "text": "Quis tempor fugiat fugiat culpa aaa?",
        "answer_A": "INC",
        "answer_B": "INC",
        "answer_C": "CORR",
        "answer_D": "INC"
    }
]
 

HTML-код:

 <div *ngFor="let quizData from questions" class="question-grid-container">
  <mat-card class="question-card">
      <mat-card-title>Question {{ quizData.id }}</mat-card-title>
      <br>
      <mat-card-content>{{ quizData.text }}</mat-card-content>
      <mat-card-actions align="end">
          <button mat-button>Next Question</button>
      </mat-card-actions>
  </mat-card>
</div>

<div *ngFor="let quizData from questions" class="answers-grid-container"
    <mat-card class="answers">
       <mat-card-actions>
           <button class="btn-ans" mat-button>{{ quizData.answer_A }}</button>
      </mat-card-actions>
    </mat-card>
    <mat-card class="answers">
       <mat-card-actions>
           <button class="btn-ans" mat-button>{{ quizData.answer_B }}</button>
       </mat-card-actions>
   </mat-card>
   <mat-card class="answers">
       <mat-card-actions>
           <button class="btn-ans" mat-button>{{ quizData.answer_C }}</button>
       </mat-card-actions>
   </mat-card>
   <mat-card class="answers">
       <mat-card-actions>
           <button class="btn-ans" mat-button>{{ quizData.answer_D }}</button>
       </mat-card-actions>
   </mat-card>
</div>
 

Класс TS:

 export class QuizComponent implements OnInit {
    quizData: IQuestionData[] = QuestionData;
}
 

quizData это массив, содержащий фактические данные, поэтому он должен быть после of . Проверьте синтаксис *ngFor

Также нет директивы с именем as ngForFrom . Его директива NgForOf.

Так что пользуйся *ngFor="let question of quizData" .

 <div *ngFor="let question of quizData" class="question-grid-container">
  <mat-card class="question-card">
      <mat-card-title>Question {{ question.id }}</mat-card-title>
      <br>
      <mat-card-content>{{ question.text }}</mat-card-content>
      <mat-card-actions align="end">
          <button mat-button>Next Question</button>
      </mat-card-actions>
  </mat-card>
</div>

<div *ngFor="let question of quizData" class="answers-grid-container"
    <mat-card class="answers">
       <mat-card-actions>
           <button class="btn-ans" mat-button>{{ question.answer_A }}</button>
      </mat-card-actions>
    </mat-card>
    <mat-card class="answers">
       <mat-card-actions>
           <button class="btn-ans" mat-button>{{ question.answer_B }}</button>
       </mat-card-actions>
   </mat-card>
   <mat-card class="answers">
       <mat-card-actions>
           <button class="btn-ans" mat-button>{{ question.answer_C }}</button>
       </mat-card-actions>
   </mat-card>
   <mat-card class="answers">
       <mat-card-actions>
           <button class="btn-ans" mat-button>{{ question.answer_D }}</button>
       </mat-card-actions>
   </mat-card>
</div>