Angular如何在firebase中保存multiSelect数据

Question

我有一个带有多个选择下拉列表的角形表单。多选字段标记如下所示:

<mat-form-field appearance="outline">
<mat-label>Food Categories</mat-label>
<mat-select 
ngModel name="categories"
#categories="ngModel"
multiple>
<mat-option *ngFor="let foodCategory of foodCategories | async [value]="foodCategory.categoryName">{{foodCategory.categoryName}}
</mat-option>
</mat-select>
</mat-form-field>

，在我的组件中，我使用以下代码:

onSubmit(form:NgForm){
console.log(form);
this.itemService.createItem(
{categories:[form.value.categories],
}
);

在接口中，分类定义如下:

export interface FoodItem {  
categories: string[];
}

和项目服务。t -代码类似于

createItem(foodItem: FoodItem) {
const foodItemCollection = this.afs.collection<FoodItem>('foodItems');  
foodItemCollection.add({     
categories:foodItem.categories,
}).then(res=>{
console.log(res);
});

，当我提交表单时，表单数据的console .log显示如下:value: {categories: Array(2)}

表单中还有其他字段，但我删除了，因为我认为这里不需要解决我面临的问题。

显示如下错误:

core.js:6479 ERROR FirebaseError:函数addDoc()调用无效数据。不支持嵌套数组(见文档foodItems/51dDi3OtfMo0NRW90ecd)

注意:当我像下面一样直接在add-item-component.ts中添加值时，它可以工作:

onSubmit(form:NgForm){
console.log(form);
this.itemService.createItem(
{categories:['Chowmin','Chinese'],
}
);

Answer 1

如果我试图理解错误信息，这是非常直接的。

我已经得到了['Chowmin','Chinese']的值我把它嵌套在另一个数组中，比如:

{categories:[form.value.categories],

但它应该是

{categories:form.value.categories}

因此不需要在方括号中进一步嵌套。