angular - 从文本框中的自动完成建议中检索选定的选项

Question

我有一个启用了自动完成功能的文本框。现在，我想从自动完成建议中检索文本框中的选定选项并将其推送到另一个文本框中。如何在打字稿中对其进行编码？有什么方法吗？

以下是具有自动完成建议的文本框代码：

<div class="form-group">
    <label>Primary Contact</label>
    <input type="text" placeholder="Enter" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
        </mat-autocomplete>
    </input>
</div>

Answer 1

mat-autocomplete有不同的事件，在这种情况下，您正在寻找：

@Output() optionSelected: EventEmitter<MatAutocompleteSelectedEvent>

这样做：

<mat-autocomplete ... (optionSelected)="doSomething($event.option.value)">

有了它，您可以分配您获得的数据doSomething()，或者做任何您需要做的事情。

堆栈闪电战

Answer 2

使用 ngModel 绑定到 myControl。

<div class="form-group">
    <label>Primary Contact</label>
    <input type="text" placeholder="Enter" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
        </mat-autocomplete>
    </input>
</div>
<input type="text" placeholder="displayTextbox" [(ngModel)]="myControl.value" >