如何将我的输入引用绑定到其他 html 元素

如何解决如何将我的输入引用绑定到其他 html 元素

我正在构建自动完成功能。

因此，当我点击输入时 - 我打开下拉菜单，在其中显示自动完成选项。

  <input [id]="autoCompleteSearchResultId" formControlName='search' type="text" autoComplete="off"/>

<div documentClick (documentClick)="closeDropDown($event)" [targetElementId]="autoCompleteSearchResultId">
    <div *ngIf='showDropDown' class='search-drop-down'>
        <div (click)='addChipHandler(s)' class='search-results'
            *ngFor="let s of autocompleteOptions | searchFilter: getInputSearchValue() : propertyValuetoShow; index as i"
            id="{{autoCompleteSearchResultId}}-{{i}}">
            <a [innerHTML]="s[propertyValuetoShow] | letterBold: getInputSearchValue()">
                {{s.name}}
            </a>
        </div>
    </div>
</div>

目前它工作正常。

但我想“以某种方式”连接这两个元素以相互了解。

例如这里的Angular Material示例，用于自动完成廉价

https://stackblitz.com/edit/angular-cwkwnm?file=src%2Fapp%2Fchips-autocomplete-example.html

在输入本身上有 [matAutocomplete]="auto" 属性 在 mat-autocomplete 组件上有 #auto="matAutocomplete" 引用。

如果它们相同，则在输入时单击垫子自动完成功能将被打开。但是如果我们删除 [matAutocomplete]="auto" 从输入然后自动完成没有打开。他们有某种联系。

如何在我的应用程序中执行此操作？