Question

如何设置席垫自动完成功能找不到的选项。

下面是我的代码：

<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 source code，目前在Angular的材料设计中没有这样的选择，还有Github Issue #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;
    })
  );

垫自动完成-如何设置选项未找到

3 个答案: