輸入值在Angular中不變

Question

我有一個自定義組件，用戶可以在其中使用下拉列表/輸入組合搜索值，然后單擊結果或滾動並在下拉列表中搜索並單擊值，這會將輸入值設置為單擊的下拉值。

假定值為：['foo'，'bar'，'fee']

如果在下拉菜單中單擊“ foo”，則輸入值將按預期更改為“ foo”。 但是，如果我將后退位略為'f'，然后再次單擊 'foo'，它將把變量設置為'foo'，但不會更新下拉值。

如果我的值是'foo'，則退格並單擊'fee'，它的確會更新。

我的值在輸入中不更新是什么問題？

搜索select.html：

<div>
    <input type="text"
        (input)="filterDropdown()"
        [(ngModel)]="filterValue" [value]="selectedItemName"/> <-- no change here
        {{selectedItemName}} <-- does change here (but I don't want it here)
    <div>
        <div *ngFor="let item of filteredItems" (click)="setItem(item)">
            {{item.name}}
        </div>
</div>

搜索select.ts：

public setItem(item): void {
        this.selectedItemName = item[this.itemName];
}

Answer 1

試試這個，這可以在本地html select標簽上使用。 HTML：

Use (change)="selectValue($event)" on <select> 
Use directive [(ngModel)]="selectedValue" on <select> 

TS：

selectedValue: any;
selectValue(ev){
   this.selectedValue = ev.target.value;
}

Answer 2

嘗試使用(change)=..而不是(input)=..

Answer 3

找到了解決方案

(input)="filterDropdown($event.target.value)"

並在ts文件中：

this.selectedItemName = value;