Angular 12测验应用从JSON文件加载数据失败及NG0303渲染异常问题排查与优化咨询

嘿，我来帮你一步步搞定这些问题！先从最显眼的报错开始拆解——

一、当前实现的核心问题 #

你遇到的NG0303错误和页面无结果，主要是这几个原因：

• *ngFor语法写错了：Angular里*ngFor的正确语法是用of，不是from！你写的*ngFor="let quizData from questions"会让Angular误以为你要绑定一个叫ngForFrom的属性，但这个指令根本不存在，所以直接报错。
• 变量名不匹配：你的TS组件里定义的是quizData数组，但模板里遍历的是questions，两者名字对不上，Angular找不到数据，自然渲染不出内容。
• 展示逻辑不符合需求：你用了两个*ngFor会把所有题目和答案一次性全渲染出来，这和你想要的“点击按钮切换下一题”完全不符，应该只显示当前的题目，用索引来控制切换。

二、用JSON存储测验数据是否合理？ #

非常合理！对于入门级的静态测验应用来说，JSON是完美的选择：

• 它轻量化、易编写易修改，不需要依赖后端接口，直接前端就能读取，特别适合你现在练手的场景。
• 等以后需要动态更新题目、保存用户成绩这类需求时，再考虑接入后端API就行，现阶段JSON完全够用。

三、更优的数据存储与Angular Material展示方案 #

1. 优化数据结构 #

你当前的JSON里答案是分开的answer_A到answer_D，改成数组形式会更灵活，还能直接标记正确答案，方便后续扩展：

[
  {
    "id": 0,
    "text": "Quis sit dolor tempor fugiat fugiat culpa qui?",
    "answers": [
      {"text": "CORR", "isCorrect": true},
      {"text": "INC", "isCorrect": false},
      {"text": "INC", "isCorrect": false},
      {"text": "INC", "isCorrect": false}
    ]
  },
  {
    "id": 1,
    "text": "Quis tempor fugiat fugiat culpa aaa?",
    "answers": [
      {"text": "INC", "isCorrect": false},
      {"text": "INC", "isCorrect": false},
      {"text": "CORR", "isCorrect": true},
      {"text": "INC", "isCorrect": false}
    ]
  }
]

2. 优化Angular组件与模板 #

改成只渲染当前题目，用索引控制切换，完全符合你的“无视图跳转”需求：

修改后的TS组件代码

import { OnInit } from '@angular/core';
import { IQuestionData } from './your-interface-path'; // 替换成你的接口路径
import quizQuestions from './quiz-data.json'; // 导入JSON文件

export class QuizComponent implements OnInit {
  questions: IQuestionData[] = quizQuestions;
  currentQuestionIndex = 0; // 跟踪当前显示的题目索引

  ngOnInit(): void {
    // 初始化时可以做个简单校验
    if (!this.questions.length) {
      console.warn('没有找到测验题目！');
    }
  }

  goToNextQuestion(): void {
    // 循环切换：最后一题之后回到第一题
    this.currentQuestionIndex = (this.currentQuestionIndex + 1) % this.questions.length;
  }
}

修改后的HTML模板

<div class="quiz-container">
  <!-- 当前题目卡片 -->
  <mat-card class="question-card">
    <mat-card-title>Question {{ questions[currentQuestionIndex].id + 1 }}</mat-card-title>
    <mat-card-content>{{ questions[currentQuestionIndex].text }}</mat-card-content>
    <mat-card-actions align="end">
      <button mat-button (click)="goToNextQuestion()">Next Question</button>
    </mat-card-actions>
  </mat-card>

  <!-- 当前题目对应的答案卡片 -->
  <div class="answers-grid">
    <mat-card class="answer-card" *ngFor="let answer of questions[currentQuestionIndex].answers">
      <mat-card-actions>
        <button class="btn-ans" mat-button>{{ answer.text }}</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

注意事项

• 记得在tsconfig.json的compilerOptions里添加"resolveJsonModule": true和"esModuleInterop": true，这样Angular才能正确导入JSON文件。
• 可以给.answers-grid加一些CSS样式，让答案卡片排列得更整齐，比如用Flexbox或者Grid布局。

内容的提问来源于stack exchange，提问作者Sebastian