angular - mat autocomplete - 如何设置未找到的选项

Question

如何为 mat mat-autocomplete 设置选项未找到。

下面是我的代码：

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let item of items | async" [value]="item">
{{item.value}}
</mat-option>
</mat-autocomplete>

AngularJS 中的等效元素是

<md-autocomplete ...>
   <md-item-template>
      ...
   </md-item-template>
   <md-not-found>
      No item matching "{{myText}}" were found.
   </md-not-found>
</md-autocomplete>

mat-autocomplete 中的 AngularJS md-not-found 等效项是什么

Answer 1

根据autocomplete.ts 源代码，目前在 Angular 的材料设计中没有这样的选项，还有一个Github 问题 #13013 “No implementation of md-not-found for Autocomplete in Angular2+”有一个解决方法。

Answer 2

作为一种解决方法，我添加了一个自定义验证器，它接受下拉列表作为数组和选择的值来检查该值是否存在。

Answer 3

我在 mat-option 上使用了disabled并在实际结果为空时映射了一个空结果。

 <mat-option *ngFor="let result of results | async" [disabled]="result.id === 0" ...

 this.results = this.searchControl.valueChanges
  .pipe(
    filter(s => s !== ''),
    debounceTime(700),
    mergeMap(s=> this._getSearchFunction(s)),
    map(data => {
      if (data.length === 0) {
        data = [{ id: 0, displayName: 'No Results' }];
      }
      return data;
    })
  );