我有一个自动完成字段，在前端运行正常，但由于[value]="option"，它将整个对象发送到后端。当我将其更改为[value]="option.id"时，表单可以正确提交，但一旦选择了一个选项，就会中断[displayWith]函数。由于displayWith使用对象更新输入，输入为空。
我可以修改什么来发送正确的id到后端，同时保留display函数？我尝试通过displayWith发送expenseCategory作为参数，但它不在for块中，因此我无法访问option对象。需要注意的是，这些是动态创建的输入，作为formArray的一部分。
这里是自动完成字段：
<mat-form-field appearance="outline" class="full-width-input">
<mat-label>Expense Category</mat-label>
<input type="text" aria-label="Assignee" matInput formControlName = "expense_category_id" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayExpenseCategoryFn">
<mat-option *ngFor="let option of filteredExpenseCategories[i] | async" [value]="option">
{{option.category}}
</mat-option>
</mat-autocomplete>
</mat-form-field>下面是displayWith函数：
displayExpenseCategoryFn(expenseCategory?: ExpenseCategory): string | undefined {
return expenseCategory ? expenseCategory.category : undefined;
}
2条答案
按热度按时间pu82cl6c1#
首先，我确信这是一个打字错误，但i是什么，在：
其次，如果您还定义了一个模板，并且使用绑定{{option.category}}，则不需要displayWith函数。
所以你可以直接回到[value]=”option.id“，这是最简单的方法。
如果您通过代码提交表单，那么您总是可以在数据被提交之前对其进行处理。
您还可以使用MatAutoComplete（https://material.angular.io/components/autocomplete/api）的（optionSelected）事件：
x一个一个一个一个x一个一个二个x
希望这个有用。
lf5gs5x22#
好的。我是从几年前做的一个项目中想出来的（以为我以前解决过这个问题）
因此，我所做的是将
displayExpenseCategoryFn绑定到控制器，这样我就可以搜索expenseCategories数组以提取类别名称并将其显示在输入字段中。然后，我对displayWith函数做了以下更改。