Question

我使用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()

Answer 1

为了尝试回答您的问题，我首先尝试重现该问题。我创建了以下内容：

StackBlitz。

我不得不对您未包含的代码做出许多假设，但是对于您所包含的代码，我并未进行实质性的修改（除了偶尔添加console.log之外）。

正如您在StackBlitz中看到的那样，您描述的问题不会发生。

这可能与您尚未共享的代码有关。请比较StackBlitz与您的代码。如果有区别，请共享不同的代码，我将更新StackBlitz以重新测试。

一些注意事项：

我只是为您的代码使用了默认的“ hello-component”。
我创建了一个简单的filter（）方法，因为您没有为此提供代码。
由于您未提供此代码，因此我创建了一个简单的displayCo（）方法。
我假设父组件通过名为companies的输入Company[]向该子组件提供了选项列表。
我还对您如何创建表单做了一些假设，因为这也没有包含在您的问题中。

我希望这可以帮助您找到问题的根本原因。

更新

您在下面的注释中提供的来自已编辑StackBlitz的代码正在调用：

this.companyForm.setControl("company", this.setCompany(newSelection));

但是this.setCompany返回一个FormGroup，.setControl()需要一个FormControl作为第二个参数。您应该可以像这样简单地更新现有的FormGroup：

this.companyForm.get('company').setValue(newSelection);

Updated StackBlitz here。

Answer 2

您实际上是在订阅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
}

角材料绑定到事件会取消valueChanges订阅

2 个答案:

更新