仅当条件为真时如何启用/可见垫自动完成

Question

更新

使用THIS解决方案在一个字段中创建用户输入弹出表单，尝试进行自动完成。

我想自动完成功能工作得很好，问题是选项不在输入框下方。

代码：

<div>
 <div class="modal-header">
 
 </div>
 <div class="modal-body">
   <form  novalidate [formGroup]="myform">
     <div class="form-floating form-group">
      <input type="text" class="form-control" id="fltName" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
      <label for="fltName">Name</label>
      

      <mat-autocomplete autoActiveFirstOption #emp="matAutocomplete"  class="form-control">
         <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
         </mat-option>
      <mat-autocomplete>
    </div>
    

问题：

1 . 选项框应该显示，只有当有 2 个或更少的匹配项时？

2 . 通过插入 emp_id 返回 emp 名称选项？

我如何设置选项，例如{name:xyz, emp_id:123, emp_no:333} ，如果我发短信任何值应该给 name 作为选项，如果我写33应该带选项xyz 。

Answer 1

问题 1：选项框应该显示，只有当有 2 个或更少的匹配项时

为此，您需要应用 ng-container（避免呈现选项框）指令并根据您的要求应用长度条件。

<mat-autocomplete #auto="matAutocomplete">
  <ng-container  *ngIf="filteredOptions && (filteredOptions | async)?.length <= 2">
    <mat-option  *ngFor="let option of filteredOptions | async"   [value]="option" >
      {{option.name}} //this is the value you always want to display
    </mat-option>
  </ng-container>
</mat-autocomplete>

问题 2：通过插入 emp_id 返回 emp 名称选项？

第二部分可以通过在必填字段上应用过滤器来实现，即

private _filter(value: string): string[] {
  if(value && value !== ""){
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.name.toLowerCase().includes(filterValue) || option.emp_no.toString().startsWith(filterValue));
  } else {
    return [];
  }
}

除此之外，您还需要修复 pipe 部分，您必须在 RxJs startWith运算符中传递控制值，例如，

 this.filteredOptions = this.myControl.valueChanges
  .pipe(
    startWith(this.myControl.value),
    map(value => this._filter(value))
  );

注意：您可以在此处访问工作解决方案