Autocomplete 角度5角度材质2-使用最小长度自动完成

为了选择患者，我在表单上添加了自动完成字段。 患者数据来自数据库。问题是有40000名患者

所以我想在用户输入最少3个字符后加载数据。 但是我不知道如何检查它，以及如何将输入传递给函数（filter参数）。 这就是我所做的。在我单击输入字段时加载数据的那一刻：

HTML:

<mat-form-field class="index-full-width">
                    <input
                      matInput
                      type="text"
                      [(ngModel)]="patientChoice"
                      placeholder="Patient"
                      aria-label="Patient"
                      [matAutocomplete]="autoPatient"
                      [formControl]="myControl"
                      (click)="getPatients()">
                    <mat-autocomplete (optionSelected)="selectPat()" #autoPatient="matAutocomplete" [displayWith]="displayFnPat">

                      <mat-option *ngFor="let patient of filteredPatients | async" [value]="patient">
                        <span>{{ patient.lastName }}</span>
                        <small>{{patient.firstName}}</small> |
                        <span>né(e) le {{ patient.dateNaissance }}</span> |
                        <small>IPP: {{patient.ipp}}</small>
                      </mat-option>
                    </mat-autocomplete>
                  </mat-form-field>

}

ngOnInit（）{
this.filteredPatients=this.myControl.valueChanges.pipe(
startWith（“”），
map（患者=>typeof患者=='string'？患者：患者名称），
map（name=>name？this.filterPatient（name）：this.listPatients.slice（）
);
}
displayFnPat（患者：患者）：字符串|未定义{
返回患者？患者名称：未定义；
}
filterPatient（名称：string）{
返回此.listPatients.filter（患者=>
patient.name.toLowerCase（）.includes（name.toLowerCase（））；
}

确定，通过添加HTML（keyup）=“getPatients（$event）”解决：

---

}

还有另一种方法，建议您这样做

它基本上是检查

过滤器

方法的长度

  filterPatient(name: string) {
    if (name.length < 2) {
      return [];
    }

    return this.listPatients.filter(patient =>
      patient.name.toLowerCase().includes(name.toLowerCase()));
  }

filterPatient（名称：string）{
如果（名称长度<2）{
返回[]；
}
返回此.listPatients.filter（患者=>
patient.name.toLowerCase（）.includes（name.toLowerCase（））；
}

此方法是否适用于switchMap？我发现在处理switchMap的地图答案时很有挑战性。

 ngOnInit() {
this.filteredPatients = this.myControl.valueChanges.pipe(
  startWith<string | Patient>(''),
  map(patient => typeof patient === 'string' ? patient : patient.name),
  map(name => name ? this.filterPatient(name) : this.listPatients.slice())
);

 }
  displayFnPat(patient: Patient): string | undefined {
return patient ? patient.name : undefined;
 }


 filterPatient(name: string) {
   return this.listPatients.filter(patient =>
    patient.name.toLowerCase().includes(name.toLowerCase()));
 }

<input
    matInput
    type="text"
    [(ngModel)]="patientChoice"
    placeholder="Patient"
    aria-label="Patient"
    [matAutocomplete]="autoPatient"
    [formControl]="myControl"
    (keyup)="getPatients($event)"
 >

getPatients(event: any) {
let searchTerm = '';
searchTerm += event.target.value;
console.log(searchTerm);
if (searchTerm.length === 2) {
  let success: any = {};
  this.klinckServices.getPatients(searchTerm)
    .then((webScriptdata) => {
        success = webScriptdata;
        this.listPatients = success.data.items;
        console.log(this.listPatients);
      },
      msg => {
        alert(msg);
      });
}

  filterPatient(name: string) {
    if (name.length < 2) {
      return [];
    }

    return this.listPatients.filter(patient =>
      patient.name.toLowerCase().includes(name.toLowerCase()));
  }