Question

我在表单中有2个素材自动输入。

1）第一个使用动态数据，除了键盘的箭头按钮不起作用外，效果很好。无法选择带箭头的选项并输入。

<mat-form-field>
    <input type="text" class="form-control" id="autoData" formControlName="autoData" matInput [matAutocomplete]="auto" (keyup)="getData($event.target.value)">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                    <mat-option  (onSelectionChange)="getMoreData(option.text)" *ngFor="let option of testData; let in=index" [value]="option">
                        {{ option.text }}
                    </mat-option>
            </mat-autocomplete>
</mat-form-field>

2）第二个使用静态数据数组。问题 - 它显示所有可能的选项，并且在输入中键入字母时不会过滤选项。还有键盘问题。

代码相同

{{option.name +“”+ option.cat}}

Answer 1

我已经完成了使用带动态数据的角度并且还过滤了该数据

html文件

     <mat-form-field>
          <input matInput [(ngModel)] = "builderCompanyName" placeholder="Builder Company Name" [formControl]="CommercialControl" [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let name of builderCompanyNameArray | listFilter:builderCompanyName" [value]="name" (click)="select(CommercialControl.value)">
              {{ name }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>

您也可以在mat-autocomplete中搜索字符串

管道文件

import { Pipe, PipeTransform } from '@angular/core';

 @Pipe({
   name: "listFilter" 
 })

 export class ListFilterPipe implements PipeTransform {
 transform(items: any[], searchText: string): any[] {
  if (!items) return [];
  if (!searchText) return items;
  searchText = searchText.toLowerCase();
  return items.filter(it => {
    // console.log(it);
    return it.toLowerCase().includes(searchText);
   });
  }
 }

以下是过滤结果

希望这会对你有所帮助。谢谢你

Angular2材质自动完成问题

1 个答案: