AngularFire2更新Firebase对象：动态键布尔值切换实现问题

我懂你的困扰——你现在能实现布尔值切换，但没法根据点击的按钮动态替换硬编码的'9'，直接用变量的话，变量名反而成了数据库里的键，对吧？

问题出在JavaScript对象字面量的语法上：如果你直接写{ day: false }，这里的day会被当作字符串键名，而不是变量day的实际值。要让变量作为键，我们需要用计算属性名（ES6特性），或者ES5的对象赋值方式。

步骤1：修改toggle函数，传递必要参数 #

你的toggle函数里只传了dayPath给block和open，但这两个函数还需要知道要更新的键名（也就是day变量），所以要把day也传进去：

toggle(event, day) { 
  const dayPath = `${this.basePath}/${day}`; 
  if (event.$value) { 
    this.block(event, dayPath, day); // 新增day参数
  } else { 
    this.open(event, dayPath, day); // 新增day参数
  } 
}

步骤2：修改block和open函数，使用动态键 #

接下来，在block和open里，用动态方式设置对象键：

方式1：ES6计算属性名（更简洁）

利用ES6的计算属性名语法，把变量放在方括号里，就能让变量的值成为对象键：

block(event, dayPath, day): void {
  // [day]会取变量day的实际值作为键名
  this.db.object(dayPath).update({ [day]: false });
}

open(event, dayPath, day) {
  this.db.object(dayPath).update({ [day]: true });
}

方式2：ES5兼容写法（支持旧环境）

如果需要兼容不支持ES6的环境，可以先创建空对象，再通过方括号赋值的方式动态设置键：

block(event, dayPath, day): void {
  const updateData = {};
  updateData[day] = false; // 用方括号访问属性，动态设置键
  this.db.object(dayPath).update(updateData);
}

open(event, dayPath, day) {
  const updateData = {};
  updateData[day] = true;
  this.db.object(dayPath).update(updateData);
}

这样修改后，点击不同的按钮，就会动态更新对应键的布尔值，再也不用硬编码'9'啦。

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