Angular中JSON属性字符串插值报错：无法读取未定义的'Title'属性

嘿，我来帮你搞定这个问题！这个报错在Angular开发里太常见啦——你发起的HTTP请求是异步的，模板会在组件初始化后立刻渲染，这时候jsonQuestionnaire还没被赋值（还是undefined），自然就会报错说读不到Title属性。下面给你三种靠谱的修复方案，顺便还帮你修正HTML里的一个小错误：

1. 最简单：使用安全导航操作符（?.） #

安全导航操作符可以帮你在访问属性前先判断对象是否存在，避免直接访问undefined的属性。直接在模板里给每个属性加上?.就行，同时注意修正*ngFor里的错误（你之前写的section[j].SectionName是多余的，section已经是遍历出来的单个元素了）：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>{{jsonQuestionnaire?.Title}}</h1>
      <p>{{jsonQuestionnaire?.WelcomeText}}</p>
      <div *ngFor="let section of jsonQuestionnaire?.Sections; let j = index">
        <br>
        <p>{{section.SectionName}}</p>
      </div>
    </div>
  </div>
</div>

2. 更严谨：用*ngIf先判断数据是否存在 #

如果不想显示空白的占位（比如数据加载时的空<h1>），可以用*ngIf把需要渲染的内容包起来，确保只有当jsonQuestionnaire有值时才渲染：

<div class="container">
  <div class="row">
    <div class="col-xs-12" *ngIf="jsonQuestionnaire">
      <h1>{{jsonQuestionnaire.Title}}</h1>
      <p>{{jsonQuestionnaire.WelcomeText}}</p>
      <div *ngFor="let section of jsonQuestionnaire.Sections; let j = index">
        <br>
        <p>{{section.SectionName}}</p>
      </div>
    </div>
  </div>
</div>

你还可以在*ngIf的else分支加个加载提示，提升用户体验：

<div class="col-xs-12" *ngIf="jsonQuestionnaire; else loading">
  <!-- 你的问卷内容 -->
</div>
<ng-template #loading>
  <p>加载中...</p>
</ng-template>

3. 推荐：使用AsyncPipe（响应式风格） #

这种方法更符合Angular的响应式编程思想，还能自动帮你管理HTTP请求的订阅和取消订阅，避免内存泄漏。需要稍微修改组件代码：

修改component.ts： #

把jsonQuestionnaire改成Observable<Questionnaire>类型，直接返回HTTP请求的Observable：

export class QuestionComponent implements OnInit {
  jsonQuestionnaire$: Observable<Questionnaire>;
  constructor(private http: HttpClient) { }
  ngOnInit() {
    // 直接把请求结果赋值给Observable变量
    this.jsonQuestionnaire$ = this.http.get<Questionnaire>('/assets/equestion.json');
  }
}

修改HTML： #

用async管道订阅Observable，并用as关键字把数据赋值给一个临时变量：

<div class="container">
  <div class="row">
    <div class="col-xs-12" *ngIf="jsonQuestionnaire$ | async as questionnaire">
      <h1>{{questionnaire.Title}}</h1>
      <p>{{questionnaire.WelcomeText}}</p>
      <div *ngFor="let section of questionnaire.Sections; let j = index">
        <br>
        <p>{{section.SectionName}}</p>
      </div>
    </div>
  </div>
</div>

额外提醒：你HTML里的小错误 #

之前的*ngFor循环里写section[j].SectionName是错误的——section已经是遍历Sections数组得到的单个元素了，直接用section.SectionName就能获取对应的值，不需要再用索引j去取哦！

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