javascript - 输入值在 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

试试这个，它适用于 native html 选择标记。HTML:

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

TS:

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