避免 Angular Material Autocomplete 为空时显示 mat-options答案

【问题标题】：Avoid Angular Material Autocomplete display mat-options when its empty避免 Angular Material Autocomplete 为空时显示 mat-options
【发布时间】：2018-12-15 16:46:15
【问题描述】：

我开始在我的一个项目中使用 Material。看文档网站<mat-autocomplete>的例子...

<mat-form-field class="example-full-width">
  <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
    <span>{{state.name}}</span> |
  </mat-option>
</mat-autocomplete>

ts：

    export class AutocompleteOverviewExample {        
      stateCtrl = new FormControl();
      filteredStates: Observable<State[]>; 
      states: State[] = [
            { name: 'Arkansas'  },
            ...
            { name: 'Texas' }
          ];

          constructor() {
            this.filteredStates = this.stateCtrl.valueChanges
              .pipe(
                startWith(''),
                map(state => state ? this._filterStates(state) : this.states.slice())
              );
          }

          private _filterStates(value: string): State[] {
            const filterValue = value.toLowerCase();
            return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);

            // Material example, its basically a ._http.get(value).map
          }
        }

当您单击输入字段时，<mat-option> 列表已部署。我想避免这种情况，只在 X 时显示选项（他们写了 3 个或更多字符，它是一个包含 5 个或 10 个元素的“小”列表等）。

如何修改此行为并动态执行？

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

这是库中的默认行为。要自定义它，您可以在更改自动完成的模型值时使用 CSS 隐藏自动完成选项，然后设置您希望输入文本的最小长度，然后相应地显示自动完成选项。将视图代码更新为：

<mat-form-field class="example-full-width">
  <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl" 
  (ngModelChange)="updatedVal($event)">
  <mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let state of filteredStates | async" [value]="state.name" 
    [ngClass]="{'hide-autocomplete': !showAutocomplete}">
   <span>{{state.name}}</span> |
   </mat-option>
  </mat-autocomplete>
</mat-form-field>

在这里，我在输入字段中添加了 ngModelChange 以检查模型更改。在 mat-option 上，我添加了 ngClass。在哪里

.hide-autocomplete { display: none; }

在类中，updatedVal 方法是：

updatedVal(e) {
  if(e && e.length >= 3) {
     this.showAutocomplete = true;
  } else {
     this.showAutocomplete = false;
  }
}

因此只有在输入长度小于3时才将隐藏类添加到mat-option中。

Demo Example

【讨论】：

这正是我需要的，谢谢！我对 ngModelChange 一无所知..！

【解决方案2】：

我认为这是一个更清洁的解决方案：

<mat-form-field class="example-full-width">
   <input matInput #searchInput placeholder="State" aria-label="State" 
   [matAutocomplete]="auto" [formControl]="stateCtrl">
   <mat-autocomplete #auto="matAutocomplete">
   <!--put mat-option inside a div and test input length value to show mat-option --> 
   <div *ngIf="searchInput.value.length>3">
      <mat-option *ngFor="let state of filteredStates | async" 
      [value]="state.name">
         <span>{{state.name}}</span> |
      </mat-option>
   </div>
</mat-autocomplete>

将mat-option 放在div 中，仅当输入值长度大于3 时才显示div。

【讨论】：