Angular 避免角材质为空时自动完成显示材质选项

我开始在我的一个项目中使用材料。 查看文档网站的

示例

{{state.name}|

ts:

导出类自动完成概述示例{
stateCtrl=新表单控件（）；
过滤状态：可见；
州：州[]=[
{name:'阿肯色州'}，
...
{name:'德克萨斯州'}
];
构造函数（）{
this.filteredStates=this.stateCtrl.valueChanges
.烟斗(
startWith（“”），
映射（state=>state？this.\u filterStates（state）：this.states.slice（）
);
}
私有过滤器状态（值：字符串）：状态[]{
常量filterValue=value.toLowerCase（）；
返回此.states.filter（state=>state.name.toLowerCase（）.indexOf（filterValue）==0）；
//例如，它基本上是一个
}
}

当您在输入字段中单击时，

将列出其已部署。我希望避免这种情况，并且只在X时显示选项（它们写3个或更多字符，这是一个包含5个或10个元素的“小”列表，等等）

---

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

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

<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>

在类中，updatedVal方法是：

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

这样，只有当输入长度小于3时，才能将隐藏类添加到mat选项中

---

这正是我需要的，谢谢！我对NGMODEL CHANGE一无所知。。！

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