AngularFire2:如何将统计属性推送/更新至同一指定子节点?
解决数据存储时百分比属性产生多余行的问题
我来帮你搞定这个问题!你现在遇到的多余行问题,根源是代码里连续调用了两次this.dataList.push()——第一次添加的是用户数据条目,第二次单独把百分比对象推了进去,这就导致dataList里出现了独立的百分比条目,反映到表格里就是多余的行。
下面分两种常见场景给你对应的解决方案:
场景1:每条数据条目附带当前百分比
如果你的需求是让每一条新添加的数据都包含当前计算出的男女比例,那只需要把百分比属性合并到同一个对象里推送即可,不需要分开调用push:
male: number = 0; female: number = 0; percentMale: number; // 建议加上类型声明,避免类型歧义 percentFemale: number; insertdata(data: App) { if (data.data1 == 'Male') { this.male++; } else if (data.data1 == 'Female') { this.female++; } // 优化:避免除以0导致NaN的情况 const total = this.male + this.female; this.percentMale = total > 0 ? (this.male / total) * 100 : 0; this.percentFemale = total > 0 ? (this.female / total) * 100 : 0; console.log('percentMale', this.percentMale + '%'); console.log('percentFemale', this.percentFemale + '%'); // 只推送一次,把所有属性合并到同一个对象 this.dataList.push({ data1: data.data1, data2: data.data2, data3: data.data3, time: new Date().getTime(), percentMale: this.percentMale, percentFemale: this.percentFemale, }); }
这样每条数据条目都会包含完整的信息,不会产生多余行。
场景2:百分比存储到固定子节点(指定键)
如果你的需求是把男女比例单独维护在一个固定的子节点(比如你提到的L2Jq0Tg4JOS66F786pT),而不是和每条数据绑定,那应该用update方法去更新这个指定节点,而不是用push(push会创建新节点,导致多余行):
male: number = 0; female: number = 0; percentMale: number; percentFemale: number; insertdata(data: App) { if (data.data1 == 'Male') { this.male++; } else if (data.data1 == 'Female') { this.female++; } const total = this.male + this.female; this.percentMale = total > 0 ? (this.male / total) * 100 : 0; this.percentFemale = total > 0 ? (this.female / total) * 100 : 0; console.log('percentMale', this.percentMale + '%'); console.log('percentFemale', this.percentFemale + '%'); // 1. 先添加新的用户数据条目(这部分保留) this.dataList.push({ data1: data.data1, data2: data.data2, data3: data.data3, time: new Date().getTime(), }); // 2. 更新指定键下的百分比数据 const targetKey = 'L2Jq0Tg4JOS66F786pT'; // 替换为你的目标键 this.dataList.update(targetKey, { percentMale: this.percentMale, percentFemale: this.percentFemale, }); }
注意:确保targetKey对应的节点已经存在,否则update可能不会生效(如果是Firebase这类数据库,update不会自动创建不存在的节点;如果需要创建,可以改用set方法)。
内容的提问来源于stack exchange,提问作者Wira Xie
相关产品推荐
相关产品推荐

