我使用Angular Material(6)设置了非常基本的自动完成功能。这是基本的实现:
base
那没问题。但是,我希望选择时会发生一些事情。为此,我在<mat-form-field>
<input type="text" matInput placeholder="Company" formControlName="company" [matAutocomplete]="autoCo"/>
<mat-autocomplete #autoCo="matAutocomplete" [displayWith]="displayCo">
<mat-option *ngFor="let company of filteredCompanies | async" [value]="company">
{{ company.companyName }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
元素中添加了(optionSelected)="onSelectionChanged($event)"
。最初,一切都按预期工作(过滤选项有效)。做出选择后,mat-autocomplete
函数也会按预期触发。
但是,做出选择后,无论我进行了什么更改,所选项目都是自动完成下拉列表中唯一可用的项目。因此,即使删除输入中的所有文本,我仍然只会看到先前选择的选项。我希望能看到完整的列表。
在onSelectionChanged
中,我有:
ngOnInit
如果我绑定到this.filteredCompanies = this.companyForm.get("company").valueChanges.pipe(
debounceTime(200))
.pipe(mergeMap(val => this.filter(val)));
,则valueChanges
订阅似乎结束。如果我没有绑定到optionSelected
,则选项列表会按预期更新。
我是否错误地绑定到optionSelected
事件?我是否必须从optionSelected
内部重新订阅valueChanges表单?如果是这样,为什么?
关于它的价值,这里有一些其他相关代码:
onSelectionChanged()
答案 0 :(得分:1)
为了尝试回答您的问题,我首先尝试重现该问题。我创建了以下内容:
我不得不对您未包含的代码做出许多假设,但是对于您所包含的代码,我并未进行实质性的修改(除了偶尔添加console.log之外)。
正如您在StackBlitz中看到的那样,您描述的问题不会发生。
这可能与您尚未共享的代码有关。请比较StackBlitz与您的代码。如果有区别,请共享不同的代码,我将更新StackBlitz以重新测试。
一些注意事项:
companies
的输入Company[]
向该子组件提供了选项列表。我希望这可以帮助您找到问题的根本原因。
您在下面的注释中提供的来自已编辑StackBlitz的代码正在调用:
this.companyForm.setControl("company", this.setCompany(newSelection));
但是this.setCompany
返回一个FormGroup,.setControl()
需要一个FormControl作为第二个参数。您应该可以像这样简单地更新现有的FormGroup:
this.companyForm.get('company').setValue(newSelection);
答案 1 :(得分:0)
您实际上是在订阅valueChanges
吗?从您的代码看起来不像。我认为您错过了一个.subscribe()
通话。
this.filteredCompanies = this.companyForm.get("company").valueChanges
.pipe(debounceTime(200))
.pipe(mergeMap(val => this.filter(val)))
.subscribe(() => {});
同样,您对onSelectionChanged
的绑定是错误的,
@Output()
optionSelected = new EventEmitter();
onSelectionChanged(event: any) {
console.log(event);
this.optionSelected.emit(event);
}
可以简化为:
onSelectionChanged(event: any) {
console.log(event);
// do what you want here
}