Angular 5生产构建报错：类型'any[]'不存在属性'description'

这个问题很典型——你踩了Angular严格类型检查的小坑啦！让我帮你理清楚问题出在哪，以及怎么快速解决：

问题根源 #

你在book.component.ts里把books_edit_data初始定义成了数组：

books_edit_data = [];

但调用this.bookService.getBook(id)获取的是单本图书的对象数据（不是数组）。当你在模板里尝试访问books_edit_data.description时，TypeScript的严格类型检查（生产构建模式下会更严格）会报错：因为数组类型any[]根本没有description这个属性。

解决方案 #

我们需要修正变量的类型定义，同时给模板加个安全防护，分两步来：

1. 修正组件里的变量定义 #

把books_edit_data从数组改成单个对象类型，推荐定义一个图书接口来规范类型（也可以用any但不推荐）：

// 先定义图书接口，包含你需要的所有属性
interface Book {
  id: number;
  description: string;
  title: string; // 示例：根据你的实际数据添加其他属性
  // ...其他图书相关字段
}

export class BookComponent implements OnInit { 
  // 初始值设为null，类型指定为Book | null
  books_edit_data: Book | null = null; 

  constructor(private bookService: BookService) { } 

  editBook(id: number){ // 给id加上类型，更规范
    this.bookService.getBook(id).subscribe(data => { 
      this.books_edit_data = data; 
      // 你的console代码...
    })
  }
}

2. 给模板添加空值安全检查 #

因为数据是异步加载的，在请求返回前books_edit_data是null，直接访问description会导致模板报错，所以用**安全导航操作符?.**来避免：

<p>{{books_edit_data?.description}}</p>

这样修改后，生产构建的错误就会消失，同时代码的类型安全性也提升了。

内容的提问来源于stack exchange，提问作者Niladri Banerjee - Uttarpara