Angular2/Firebase：实现postFeed与feedCounter赋值后解除绑定不同步更新

嘿，我来帮你解决这个数组引用绑定的问题！核心问题其实是数组作为引用类型，直接赋值会导致两个数组共享同一个内存地址，所以后续更新会互相影响。下面是分步的解决方案：

1. 展示feedCounter的长度 #

直接访问数组的length属性就能获取当前长度，不管是在视图层还是逻辑层都能用：

// 在逻辑中获取长度
const counterLength = this.feedCounter.length;

// 以Vue为例，视图层展示
<p>当前feedCounter条目数: {{ feedCounter.length }}</p>

// 以React为例，视图层展示
<p>当前feedCounter条目数: {this.state.feedCounter.length}</p>

2. 点击时同步postFeed与feedCounter（避免后续同步更新） #

关键是创建feedCounter的独立副本，而不是直接赋值。根据你的数组元素类型，选择合适的拷贝方式：

情况1：数组元素是基本类型（字符串、数字、布尔等） #

浅拷贝就足够隔离两个数组的引用，几种常用实现方式：

• 扩展运算符：

// 点击事件处理函数
handleSyncFeed() {
  this.postFeed = [...this.feedCounter];
}

• slice()方法：

handleSyncFeed() {
  this.postFeed = this.feedCounter.slice();
}

• Array.from()：

handleSyncFeed() {
  this.postFeed = Array.from(this.feedCounter);
}

情况2：数组元素是对象/引用类型 #

如果feedCounter里存的是对象，浅拷贝只会拷贝对象的引用，后续修改feedCounter里的对象还是会影响postFeed，这时候需要深拷贝：

handleSyncFeed() {
  // JSON序列化/反序列化实现深拷贝（注意：无法拷贝函数、Symbol等特殊类型，大部分场景够用）
  this.postFeed = JSON.parse(JSON.stringify(this.feedCounter));
}

如果需要支持特殊类型的深拷贝，可以自己实现递归深拷贝函数，或者使用成熟的工具函数（比如Lodash的_.cloneDeep，但如果不想引入第三方库，优先用上面的JSON方法）。

3. Firebase快照更新feedCounter的代码保持不变 #

你当前的代码逻辑是正确的，每次Firebase触发child_added时，新元素会被push到feedCounter，但因为我们点击时已经创建了独立的副本，所以后续feedCounter的更新不会影响postFeed：

this.subscription.on('child_added', (snapshot) => { 
  this.feedCounter.push(snapshot.val()); 
});

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