提交 mat-autocomplete 的值

Question

我们mat-autocomplete在表单上有一个输入。

这些选项是从数据库填充的，这些选项以 ID、字符串对的形式返回。

我想允许用户根据字符串值进行选择，但在发布服务器端时使用表单提交 ID 值以进行查找？请问这个问题最好的解决方案是什么？

我的 component.html 是；

<mat-form-field class="form-group special-input">
    <input type="text" placeholder="Select a trade" aria-label="Select a trade" matInput formControlName="trade" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" md-menu-class="autocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
             <span [innerHTML]="option.name | highlight: toHighlight"></span>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

其中选项有名称和 ID 字段。

我尝试过调整[value]="option.name"，但是[value]="option.id"这会将自动完成中的文本字段更新为 id 值而不是字符串？

Answer 1

您可以添加一个简单的

(onSelectionChange)="selectedOption(option)"

on mat-option，将数据的绑定传递给 ts 组件。然后您可以轻松决定应该向服务器传递什么值。