Angular中的输入值不变

Question

我有一个自定义组件，用户可以在其中使用下拉/输入组合搜索值并单击结果或滚动并在下拉列表中搜索并单击该值，这会将输入值设置为单击的下拉值。

假设值为：['foo', 'bar', 'fee']

如果我在下拉菜单中单击“foo”，输入值将按预期更改为“foo”。但是，如果我退格一点到“f”，然后再次单击“foo”，它会将变量设置为“foo”，但不会更新下拉值。

如果我的值是“foo”，我退格并单击“费用”，它会按应有的方式更新。

我的值没有在输入中更新的问题是什么？

搜索选择.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>

搜索选择.ts：

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

Answer 1

试试这个，这适用于原生 html 选择标签。 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

找到解决办法

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

在ts文件中：

this.selectedItemName = value;

Answer 3

尝试使用(change)=.. 而不是(input)=..