【Angular + TS】yarn build 时才暴露ngFor 遍历 Object 有问题（原因还待深入学习）

问题代码

开发时，想着我就要遍历Object，代码如下。
使用 angular 6.1 内置集成的管道指令【Object | keyvalue】。

pipe用法：{{ 输入数据 | 管道 : 管道参数}}  (其中‘|’是管道操作符，处理数据之用)

import { Component} from "@angular/core";
@Component({
  selector: "app-home",
  templateUrl: `
  <nz-select [(ngModel)]="selectPen">
    <nz-option *ngFor="let item of penOptions | keyvalue" [nzLabel]="item.value" [nzValue]="item.key"></nz-option>
  </nz-select>
`,
})
export class HomeComponent {
  selectPen: string = "None";
  penOptions: object = {
    LineString: '线',
    Polygon: '多角形',
    Square: '正方形',
    Rectangle: '长方形',
    None: '无'
  }; // 绘制图形集合
  constructor() {}
  drawQueryArea(selectPen): void{}
}

build失败

程序跑起来很OK，那这样写就没毛病，但是等到下班要部署的时候，哐的一下就报了个错，build失败。

解决方案

由于急着下班，也就没有深究这个报错原因。
于是直接改代码，将Object改成Array，或者使用objectKeys()，总之方法很多很多，没必要死磕ngFor 遍历 Object。
改完代码愉快下班。

import { Component} from "@angular/core";
@Component({
  selector: "app-home",
  templateUrl: `
  <nz-select [(ngModel)]="selectPen">
    <nz-option *ngFor="let keyItem of objectKeys(penOptions)" [nzLabel]="keyItem" [nzValue]="keyItem"></nz-option>
  </nz-select>
`,
})

可能原因

想着可能是angular的版本不对（这个项目依赖的版本低于我全局安装的angular-cli）。
但事实上，项目依赖和全局安装的angular-cli版本都高于v6.1，所以不是管道指令【Object | keyvalue】的问题。


那到底是啥原因呢？仔细查看build 报错信息，可能是类型定义的问题。

我将【penOptions 】的初始类型定义【object】去掉，发现代码运行ok，build也能成功。

但是百度了很久，依旧不知道为什么去掉【penOptions 】的初始类型定义【object】就能通过build编译。

个人猜测可能是TS 中 Object, object, {} 类型之间的区别（此处挖坑，待深入学习）

终极解决方案

import { Component} from "@angular/core";
@Component({
  selector: "app-home",
  templateUrl: `
  <nz-select [(ngModel)]="selectPen">
    <nz-option *ngFor="let item of penOptions | keyvalue" [nzLabel]="item.value" [nzValue]="item.key"></nz-option>
  </nz-select>
`,
})
export class HomeComponent {
  selectPen: string = "None";
  penOptions = {
    LineString: '线',
    Polygon: '多角形',
    Square: '正方形',
    Rectangle: '长方形',
    None: '无'
  }; // 绘制图形集合
  constructor() {}
  drawQueryArea(selectPen): void{}
}