Angular中TypeScript读取JSON文件类型不匹配报错求助

错误原因分析 #

• 你的JSON文件是单个对象，但代码中data被定义为Setup[]（数组类型），类型不匹配导致报错。
• 接口Setup的字段名与JSON中的键完全不对应，即使类型正确也无法正确读取数据。
• JSON代码存在语法错误："extport": "1176",,多了一个逗号，需先修正。

修复步骤 #

1. 修正JSON文件语法错误 #

将"extport": "1176",,改为"extport": "1176",

2. 调整接口类型，匹配JSON结构 #

根据需求选择两种方案之一：

// 方案1：直接匹配JSON原生键名
interface Setup {
  nb: string;
  expport: string;
  REQ_EMAIL: string;
  DIGEST: string;
  password: string;
  ip: string;
  name: string;
  version: string;
}

// 方案2：自定义字段名，后续做映射
interface Setup {
  number: string;
  port: string;
  email: string;
  password: string;
}

3. 修正变量类型与赋值 #

导入的param是单个对象，因此data类型需改为Setup而非数组：

import { Component, OnInit } from '@angular/core';
import * as param from '../../data/setup.json';

// 以方案1接口为例
interface Setup {
  nb: string;
  expport: string;
  REQ_EMAIL: string;
  DIGEST: string;
  password: string;
  ip: string;
  name: string;
  version: string;
}

@Component({
  selector: 'app-appareils',
  templateUrl: './appareils.component.html',
  styleUrls: ['./appareils.component.scss']
})
export class AppareilsComponent implements OnInit {
  // 修正为单个对象类型，添加类型断言确保类型匹配
  data: Setup = param as Setup; 

  constructor() {}

  ngOnInit(): void {}
}

如果使用方案2的自定义字段，需在ngOnInit中完成字段映射：

ngOnInit(): void {
  this.data = {
    number: param.nb,
    port: param.extport,
    email: param.REQ_EMAIL,
    password: param.password
  };
}

4. 在HTML模板中使用数据 #

根据接口方案选择对应字段名访问：

<!-- 方案1：使用JSON原生键名 -->
<p>编号: {{ data.nb }}</p>
<p>端口: {{ data.extport }}</p>
<p>邮箱: {{ data.REQ_EMAIL }}</p>

<!-- 方案2：使用自定义字段名 -->
<p>编号: {{ data.number }}</p>
<p>端口: {{ data.port }}</p>
<p>邮箱: {{ data.email }}</p>

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