提交 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)"

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