Angular2 模型渲染的一个坑

今天在使用angular2开发一个CMS项目的时候发现了一个模型渲染的坑，特此记录。

相信很多人使用angular2的时候都有这么一种情况，首先定义一个单例service，作为数据的提供者，在组件中注入，service中只简单的返回一个数组对象。例如：

在组件中定义一个私有变量，等于例如图中的columns(图中是我更改以后的代码，原本就是定义了一个私有变量，等于了对象中的columns数组，然后在HTML中Ngfor循环显示)：

运行，一切正常，view中也能正确渲染，但是如果这时候你从另一个组件中使用一个新的数组直接替换了service中的columns数组，按理说view中应该是渲染出新的结果，但是结果是view没有任何变化。到底为什么是这样呢？按理说js的数组传递应该是按引用传递，传递顺序应该是这样(图中的红线代表新赋值后的引用，每一个方块理解为一个内存块)：

但是你如果log出两个不同引用的值，会发现，其实并不是这样的。按照我搜索的资料，实际引用关系是这样：

也就是说，当你赋值数组的时候，a=[1,2,3]; a=b; a=[2,3,4]，b其实是接收了一份a指向数组内存地址的copy，也就是b存的是[1,2,3]的内存地址，那么当你将a指向另一个数组地址时，b其实根本没有改变。

那么怎么去解决这个问题呢？有两种解决方案：

1. 像我之前的图一样，直接传递对象的引用过去，然后在view中去对象中的对应属性(这也是angular推荐的做法，无论是1还是2，都推荐将需要绑定的值使用对象，而不是直接使用一个字符串之类的)。
2. 改变数组的时候不要使用赋值，而是使用例如JS Array slice等方法，直接改变原地址上的数组(这种情况非常麻烦)