如何从 Angular 12 中的 json 文件恢复数据

Question

作为一名初级开发人员，我正在使用 Angular12 编写一个简单的测验应用程序来提高我的技能。我在使用 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'

在最终结果中，应该会在 angular material 卡片中显示带有答案的问题文本，并在按钮上保持一个事件，允许用户在不更改视图的情况下移动到下一个问题。我做错了什么，这是做错并保存测验数据的好方法吗？或者也许是存储数据并将其显示到 angular material 卡片中的更好方法。

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 class:

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

Answer 1

quizData是包含实际数据的数组，所以应该在of之后。检查 *ngFor 语法

也没有名为ngForFrom的指令。它的 ngForOf 指令。

所以使用*ngFor="let question of quizData"。

尝试下面的 HTML 代码

<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>

如何从 Angular 12 中的 json 文件恢复数据

How to restore data from json file in Angular 12

javascript

json

angular

angular12