我有自动完成输入
<
div formArrayName="addresses"> <div class="row" *ngFor="let itemrow of searchForm.controls.addresses.controls; let i=index" [formGroupName]="i"> <mat-form-field>
<input type="text" class="form-control" id="address"
formControlName="address" matInput [matAutocomplete]="auto"
(keyup)="getESRI($event.target.value)"
(focusout)="bindLocation($event.target.value)">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of testLocation"
[value]="option.text">
{{ option.text }}</mat-option></mat-autocomplete></mat-form-field> </div></div>
“testlocation”：[{ “文”： “Euronet上”,“magicKey”： “dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ ==”,“isCollection”：真正},{ “文”： “Euronet上”,“magicKey”： “dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ ==” “isCollection”：真正}]
当我尝试添加值[value] =“option.magicKey时,它在输入option.magicKey中显示,当我选择选项时.我只需将option.magicKey作为值,并将option.text作为输入选项.其他如何添加option.magicKey作为bindLocation($event.target.value)函数的参数？
解决方法
使用’displayWith’
MatAutoComplete具有一个名为displayWith的输入.其中,您需要传递一个将选项的控制值映射到其显示值的函数.
这是一个例子：
<mat-form-field>
<input
matInput
placeholder="Select a value"
[formControl]="form.controls.enumField"
[matAutocomplete]="autoComplete">
<mat-autocomplete
#autoComplete="matAutocomplete"
[displayWith]="valueMapper"> <-- Using displayWith here
<mat-option
*ngFor="let enum of enumerationObservable | async"
[value]="enum.key">
{{ enum.value }}
</mat-option>
</mat-autocomplete>
这是使用收到的密钥返回值的函数
public valueMapper = (key) => {
let selection = this.enumeration.find(e => e.key === key);
if (selection)
return selection.value;
};
