Angular 6生产构建报错：boolean无法作为索引类型（ngClass相关）

这个问题我之前排查过，其实核心是Angular生产构建的严格类型检查规则在起作用，咱们一步步拆解：

错误含义解析 #

你在ng build --prod时遇到的Type 'boolean' cannot be used as an index type，意思是：
TypeScript在生产模式下启用了严格类型校验，你用布尔值（showMenu === true的结果是boolean类型）去作为对象的索引，但TypeScript规定对象的索引只能是string或number类型，布尔值不符合这个要求，所以触发了报错。

而ng serve（开发模式）下，Angular的类型检查规则没那么严格，加上JavaScript本身会自动把布尔值隐式转换为字符串（比如true会转成"true"），所以浏览器能正常解析你的代码，不会报错。

解决方案（推荐第二种，最符合Angular规范） #

方案1：把布尔值显式转为字符串 #

虽然能解决问题，但写法不够优雅：

<div class="collapse navbar-collapse" [ngClass]="{true: 'show'}[(showMenu === true).toString()]">

方案2：使用ngClass标准的对象语法（强烈推荐） #

这是Angular官方推荐的ngClass用法，简洁且完全符合类型要求：

<div class="collapse navbar-collapse" [ngClass]="{'show': showMenu}">

这里的逻辑是：当showMenu为true时，自动添加show类，反之则移除，完全等价于你原来的逻辑，但写法更规范。

方案3：使用三元表达式 #

如果更习惯这种写法也可以：

<div class="collapse navbar-collapse" [ngClass]="showMenu ? 'show' : ''">

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