Angular 5 Angular Material 2 - 使用 minLength 自动完成

Posted 2023-03-25

【中文标题】Angular 5 Angular Material 2 - 使用 minLength 自动完成

【英文标题】：Angular 5 Angular Material 2 - autocomplete with minLength

【发布时间】：2018-10-19 17:03:41

【问题描述】：

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

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

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>

TS：

 getPatients() 
let searchTerm = '*';
let success: any = ;
this.klinckServices.getPatients(searchTerm)
  .then((webScriptdata) => 
      success = webScriptdata;
      this.listPatients = success.data.items ;
      console.log(this.listPatients);
    ,
    msg => 
      alert(msg);
    );

 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()));
 

【参考方案1】：

还有另一种方法，推荐here。

它基本上是检查你的 filter 方法的长度。

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

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

【讨论】：

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

【参考方案2】：

好的，通过添加 HTML (keyup)="getPatients($event)" 解决：

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

在 TS 文件中：

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