Angular 4执行ng build --prod报错：Book[]类型不存在ResultJson属性

嗨，我来帮你搞定这个生产构建报错的问题！咱们先理清楚问题根源，再一步步解决。

问题原因 #

你现在把books定义成了Book[]类型（也就是Book对象的数组），但你的JSON数据结构其实是一个包含ResultJson属性的对象，这个属性里才是真正的Book数组。开发环境下ng serve的类型检查没那么严格（比如默认没开启严格模板检查），所以没报错；但生产构建ng build --prod会启用AOT编译和严格类型校验，类型不匹配的问题就暴露出来了。

另外你的模板里还有两个小笔误，也得一起修正，不然即使类型对了，UI也没法正常展示数据：

• *ngFor="let b of book?.ResultJson"里的book应该是books
• {{p.name}}和{{p.id}}里的p应该是循环变量b

解决方案 #

1. 修正数据类型定义 #

首先创建一个匹配你JSON结构的接口，用来描述整个响应对象：

// 先确保你已经有Book接口的定义
interface Book {
  name: string;
  id: number;
  // 补充Book的其他属性...
}

// 新增接口匹配你的JSON结构
interface BookResponse {
  ResultJson: Book[];
}

然后把books的类型改成BookResponse（如果是异步获取数据，也可以定义成BookResponse | undefined）：

books: BookResponse = { ResultJson: [] };

2. 修正模板代码 #

把模板里的笔误和类型不匹配的地方修正：

<div *ngIf="books?.ResultJson.length === 0"> 
  <h4>no result found</h4> 
</div> 
<div *ngIf="books?.ResultJson.length > 0"> 
  <form> 
    <table> 
      <tr> 
        <td><h4>Name</h4></td> 
        <td><h4>Id</h4></td> 
      </tr> 
      <!-- 修正book为books，p为b -->
      <tr *ngFor="let b of books?.ResultJson"> 
        <td>{{b.name}}</td> 
        <td>{{b.id}}</td> 
      </tr> 
    </table> 
  </form> 
</div>

3. 验证修复 #

现在再执行ng build --prod，应该就不会再报类型错误了，同时UI也能正常展示ResultJson里的数据。

补充说明 #

生产构建的严格校验其实是帮你提前发现潜在的类型问题，避免上线后出现意外bug。如果以后遇到类似的类型不匹配问题，优先检查你的数据类型定义是否和实际返回的JSON结构一致哦～

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