2020-01-03/ng-zerro升级的问题

之前开发了一个简单的web项目，前端使用Angular6+ng-zorro(7)作为开发技术。很长一段闲置了项目，没有进行开发。后面手痒，想继续写写页面，怎料前端框架版本升级这么快，Angular已经到8了，ng-zorro到了8.5。一些过渡性版本不见了，这么时候就只剩下升级版本这一条路了。升级很快完成，ng-zorro的一些废弃组件进行了替换，Angular的一些指令和Service provider提供方式做了修改，一切似乎回到了之前的样子。但紧接着我就发现了问题。

image.png

ng-zorro 的table在本地运行有复选框的，但是进行ng build --prod 之后，这个复选框就神奇的不见了，f12控制台也没有任何的报错，打包过程也没有报错，那么问题在哪里呢呢？
一番百度之后，进行了尝试，没有改变什么。
接下来我就怀疑是ng build --prod 这个环节出问题了，于是看了一些Angular aot 的一些注意事项，没有明显的问题。然后我怀疑是环境的问题，然后把node升级到12，问题依旧。
接下来，我只有看看ng-zorro的table组件是否有问题了。
果然，这个是有问题的，table的示例代码是这样的：

      <tr *ngFor="let data of rowSelectionTable.data">
          <td
            nzShowCheckbox
            [(nzChecked)]="mapOfCheckedId[data.id]"
            [nzDisabled]="data.disabled"
            (nzCheckedChange)="refreshStatus()"
          ></td>
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
        </tr>

而我是这样的：

<ng-template ngFor let-data [ngForOf]="rowSelectionTable.data" let-i="index">
      <tr>
        <td nzShowCheckbox [(nzChecked)]="data.checked"  (nzCheckedChange)="refreshStatus()"></td>
        <td>{{ data.name }}</td>
        <td>{{ data.age }}</td>
        <td>{{ data.address }}</td>
      </tr>
    </ng-template>

我看处不同，改成ng-zorro的样子，即去掉ng-template，改成*ngFor。问题依旧。
接下来看table组件的api,发现nzShowCheckbox是一个属性，因此我改成了这样：

     <tr *ngFor="let data of todoTable.data;let i = index">
        <td [nzShowCheckbox]="true" [(nzChecked)]="data.checked"  (nzCheckedChange)="refreshStatus()"></td>
        <td>{{ data.name }}</td>
        <td>{{ data.age }}</td>
        <td>{{ data.address }}</td>
      </tr>

也就是我改成了 [nzShowCheckbox]="true" 直接给它一个true属性，现在打包，部署，一切ok。
这个问题困扰了我好久，一度想要放弃Angular，但解决一个问题，还是挺有成就感的。
放上demo的地址：
https://www.fantasyworldforyou.com/#/index
登陆密码： abc/123456