Angular中如何将多选下拉数据保存到Firebase？遇嵌套数组错误

问题原因 #

你在提交表单时犯了一个简单的错误：form.value.categories本身已经是多选下拉框返回的一维数组（比如["Chowmin","Chinese"]），但你在传递给createItem时又用[]额外包裹了一层，形成了嵌套数组（如[["Chowmin","Chinese"]]）。而Firebase不支持存储嵌套数组，因此触发了报错。

修复方案 #

修改组件中的onSubmit方法，去掉多余的数组包裹，直接传递原数组即可：

onSubmit(form: NgForm){
    console.log(form);
    this.itemService.createItem({
      categories: form.value.categories // 直接使用表单返回的数组，无需额外包裹
    });
}

验证说明 #

修改后，传递给createItem的categories结构就和你测试用的字面量['Chowmin','Chinese']完全一致，符合FoodItem接口定义的string[]类型，能够正常保存到Firebase。

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