Question

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

假设值是：['foo'，'bar'，'fee']

如果我在下拉列表中单击“ foo”，则输入值将按预期更改为“ foo”。但是，如果我将后退位略为'f'，然后再次点击'foo'，它将把变量设置为'foo'，但不会更新下拉值。

如果我的值是'foo'，则我退格并单击'fee'，它的确会更新。

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

search-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>

search-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;

输入值在Angular中不变

3 个答案: